ムービーコモンズ活用のヒントとコツ
Webセミナーで高解像度の動画を利用する方法
2021-06-10
Zoom などライブの Webセミナーを録画したものに、目次インデックスを付けて、オンデマンド配信をされるお客様が少しづつ増えています。
それに伴って、動画をフルスクリーン表示にした時、もっときれいに表示されるようにできないでしょうか、といったお問い合わせをいただくケースも出てきました。
ライブの録画動画をオンデマンド化する際、掲載する Webページの幅の制約などもあり、多くの場合、動画の表示サイズが元の動画サイズよりも小さくなってしまうものと思います。
その結果、視聴ユーザーが、動画をフルスクリーン表示で見ることも増えてくるのではないかと思われますが、フルスクリーン表示により、動画自体は大きくなっても、全体的に目が粗い状態であったり、細かい文字が潰れたまま大きく表示されてしまうといったことがあり、上でご紹介したお問い合わせにつながっているものと思われます。
今回は、少し裏ワザ的なものになりますが、Webセミナーの作成の中で、ひと工夫することによって、動画をフルスクリーン表示にした時に、より鮮明に見えるようにする方法をご紹介します。
■動画の「画面解像度」と「表示サイズ」の違い
具体的な方法をお伝えする前に、2つの用語について少しだけ説明させていただきます。
動画は、ビデオカメラで撮影をする際や、動画編集ソフトで変換・保存をする際に「画面解像度」を設定します。画面解像度とは、簡単に言うと画面のキメの細かさであり、少し技術的な言葉で言うと画面がどれだけの「画素数」で構成されているかを表すものです。
画面解像度が高ければ、より鮮明な画像（映像）になるということになります。
例えば、テレビなどでもよく使われるハイビジョン（HD）、フルハイビジョン（フルHD）、4K、8K などは、この画面解像度を表しています。
| 画面解像度 （横の画素数×縦の画素数） |
|
|---|---|
| ハイビジョン（HD） | 1280 × 720 |
| フルハイビジョン（フルHD） | 1920 × 1080 |
| 4K | 3840 × 2160 |
| 8K | 7680 × 4320 |
注：上記は、現在、テレビの世界でよく使われている言葉を例にして作った一覧です。画面解像度が大きくなればなるほど、1秒あたりに送信しなければならないデータ量も多くなるため、回線の太さが限られているネットの世界では、ハイビジョンよりも画面解像度が低い動画がまだまだ一般的であると思います。
これとは別に、動画を Webページに掲載する際、「表示サイズ」を設定します。
Webページは HTML/CSS を使って作成することになりますが、動画を掲載する場合には <video>タグを使って、表示する動画ファイルを指定し、その <video>タグ（または、その <video>タグを包む親要素）に対して「width:320px; height:180px;」といったスタイルを設定して、動画の「表示サイズ」を決める形になります。
これは一般論ですが、Webページに動画を掲載する場合、「画面解像度」が「1920×1080」の動画を「width:320px; height:180px;」の「表示サイズ」で表示することもあれば、「画面解像度」が「320×180」の動画を「width:320px; height:180px;」の「表示サイズ」で表示することもあります。
どちらも、Webページ上では「幅 320px、高さ 180px」の動画として表示されますが、「画面解像度」の違いにより、前者の方がよりキメ細かい画像として見えるものと思います。
また、その鮮明度の違いは、それぞれをフルスクリーン表示にした時に歴然となるはずです。前者は表示を大きくしても高精細の状態であるのに対して、後者は画像の粗さが目立つ状態になるからです。
■ムービーコモンズにおける「動画サイズ」とは
ムービーコモンズでは、当初より「画面解像度」の値と「表示サイズ」の値を同一にする方針でシステムが設計されています。
たとえば、Webページに掲載する動画のサイズを「幅 320px、高さ 180px」としたい場合は、「画面解像度」を「320×180」にし、それを「表示サイズ」として表示する形になっています。
このため、現在のシステム（管理者用のコントロールパネル）をマニュアルどおりに使った場合、上で例にあげた「画面解像度」と「表示サイズ」の値が異なる動画を作ることはできません。
しかし、ひと工夫をすることで、それが可能になります。マニュアルには書かれていない裏ワザをご紹介します。
■大きな「画面解像度」の動画を作成 ＋ 埋め込みコードの値を修正
最初にざっくりと、ここで行うことをお伝えしますと、まず大きな「画面解像度」の動画をコントロールパネルにアップロードし、それを組み込んだ Webセミナーを作成します。出来上がった埋め込みコードは、そのままでは、大きな「画面解像度」をもとに、HTML/CSS の値が設定されているため、後から手作業で、幾つかの値を修正して、HTML/CSS レベルで表示サイズを調整する、といったものです。
ここでの作業は、HTML や CSS の知識は必須ではありませんが、全くないよりは、少しあった方が応用範囲が広がると思います。
ここでは、Zoom録画を「画面解像度：1920×1080」で記録し、その録画動画を Webページ上で「表示サイズ：480×270」とする場合を想定して、具体的な作業の流れを説明します。なお、動画の隣に配置する目次のサイズは「310×270」とし、動画と目次の間隔は「10px」とします。
手順１：ムービーコモンズのコントロールパネルにログイン
手順２：「アップロード」ページの「MP4動画」に進み、Zoom録画動画をアップロード
もし、録画動画をそのままではなく、不要部分を削除するなど修正を加えたい場合は、事前に動画編集ソフトで編集をしてください。
なお、Zoom録画をそのままアップロードする場合は、十分圧縮された状態になっているものと思われますが、編集ソフトで編集をした場合、書き出しのビットレートが大きくなり過ぎないように注意してください。（スライド資料が中心の Zoom録画であれば、総ビットレートとして 500kbps 前後で問題ないのではないかと思われます。）
手順３：「アップロード」ページの「スライド」に進み、目次インデックス用のパワーポイント資料をアップロード
パワーポイントファイルのタイトル欄に目次項目の文字列を入力（１ページあたり、１目次項目）し、目次インデックス作成用のパワーポイント資料を作ってアップロードします。
手順４：「Webセミナー」ページに進み、ステップ１〜ステップ５まで作業を進める
「ステップ４：目次の作成」のページでは、「目次のスタイル編集」にて「ボックスの大きさ」を「310×270」とします。
「ステップ５：レイアウト選択と公開設定」では、「動画＋目次」のレイアウトを選択し、間隔を「10px」にします。
なお、「実寸サイズでプレビュー」は、今回のような作成方法を想定したものではないため、ここでは利用しないでください。
手順５：ステップ５で埋め込みコードをコピー取得し、HTMLファイルにペースト
埋め込みコードは次のようになります。（以下は説明のための架空の埋め込みコードです。実際の埋め込みコードには、改行が入っていませんが、ここでは、見やすくするため改行を入れています。また、後の説明で触れる箇所をわかりやすくするため一部に色を付けています。）
<div class="MCSeminarController" id="preview2_3_ecdc3e40-17a0-0137-d248-1231500626bb" style="position:relative;width:2260px;height:1100px;margin:0px 0px 0px 0px;background-color:transparent;overflow:hidden;">
<div class="MCIndexContainer" style="width:310px;height:270px;position:absolute;top:10px;left:1940px">
<div class="MCVideoContainer" style="width:1920px;height:1080px;position:absolute;top:10px;left:10px">
手順６：埋め込みコードの値を修正する
上記の埋め込みコードのまま、Webサーバーにアップロードすると、動画だけ非常に大きなWebセミナーになってしまいます。
ここでは、動画のサイズが適切なサイズになるように埋め込みコードの中に含まれる幾つかの値を修正していきます。
その前に、修正対象となる行について簡単に説明します。
- 「div class="MCSeminarController"」で始まる行は、埋め込みコンテンツの全体枠を表しています。
- 「div class="MCIndexContainer"」で始まる行は、「目次」部分を表しています。
- 「div class="MCVideoContainer"」で始まる行は、「動画」部分を表しています。
これらの行について、次のように値を修正していきます。
- 動画の「表示サイズ」を「480×270」に変えるため、「div class="MCVideoContainer"」の行に含まれる値を次のように修正。
width:1920px;height:1080px;
↓
width:480px;height:270px; - 目次の位置を全体枠の左辺から 500px の位置にするため、「div class="MCIndexContainer"」の行に含まれる値を次のように修正。（500px という値は、動画の表示幅である 480px に、動画の左側の間隔 10px と動画の右側の間隔 10px を足して出したものです。）
left:1940px
↓
left:500px - 全体枠を、値を修正した動画と目次が収まり（動画と目次の間隔は 10px）、上下左右に 10px の間隔ができるようにするため、「div class="MCSeminarController"」の行に含まれる値を次のように修正。
width:2260px;height:1100px;
↓
width:820px;height:290px;
修正の結果は次のようになります。
<div class="MCSeminarController" id="preview2_3_ecdc3e40-17a0-0137-d248-1231500626bb" style="position:relative;width:820px;height:290px;margin:0px 0px 0px 0px;background-color:transparent;overflow:hidden;">
<div class="MCIndexContainer" style="width:310px;height:270px;position:absolute;top:10px;left:500px">
<div class="MCVideoContainer" style="width:480px;height:270px;position:absolute;top:10px;left:10px">
手順７：上記 HTML ファイルを Webサーバーにアップロードしてブラウザーで確認
以上で、フルスクリーン表示にしても鮮明に見える動画を含む Webセミナーの完成です。
■実際のWebセミナー作成でお困りの場合は
上に示したものは、あくまでも一つの例です。これと全く同じサイズの Webセミナーを作成する場合は参考にできるものと思いますが、サイズが違うものを作成する場合は、やはり HTML/CSS の知識が必要になってくるものと思います。
作成したい Webセミナーのイメージは持っているものの、埋め込みコードの修正を自分で行うのは難しいというお客様につきましては、当社にて、埋め込みコードの修正を含むサポートをいたしますので、いつでもお気軽にご相談いただければと思います。
