MOV を WebM に変換

これがこのページ全体の前提です。目の前にある MOV は Final Cut や Premiere、DaVinci Resolve から書き出されたか、カメラのメモリーカードから直接取り出したもので、編集のために作られたファイルです。数百メガバイトの容量があり、ProRes かもしれず、いま存在する中で最も高品質な素材です。

行き先はまったく逆です。ランディングページの中でテキストの背後を彩るだけの動画や、スマートフォンで見る人が作品を気に入るかどうかを確かめるために 8 メガバイトも使わせるべきではないポートフォリオです。以下はすべて、遅い回線で見たときに後悔しない選択をするための内容です。

これは最初に伝えておくべきことです。デザイナーが MOV を変換する理由でいちばん多いのがこれだからです。透明な動画——ロゴのアニメーションやアニメーションする字幕、ページの上に浮かぶ商品映像——は QuickTime の ProRes 4444 として配信され、ブラウザー側の対応物はアルファチャンネル付きの WebM の VP9 です。一見つながっているように見えます。

しかしここでは対応していません。この変換はアルファチャンネルを捨てるため、出てくる映像は不透明になります。実際には ProRes 4444 のファイルはブラウザーでそもそも復号できないことが多く、その手前で失敗します。アルファ付きの WebM を作るには、ffmpeg のビルドや After Effects の WebM プラグインなど、それを書き出せるツールが必要です。MOV をマスターとして残し、透明な WebM はそれを作ったソフトから書き出してください。

映像は常に VP9、音声は常に Opus です。ビットレートは品質の帯域と解像度によって決まり、モデルでは VP9 が H.264 よりおよそ 4 割効率が良いとされています。1080p では 3 段階がそれぞれ約 1.1、1.8、3.6 メガビット毎秒になり、MP4 なら 1.8、3、6 メガビット毎秒になるところです。

その効率化は価値がありますが、いちばん大きな効き目ではありません。4K のマスターを 1080p に落とすだけで画素数の 4 分の 3 が符号化器の前に消え、400 ピクセルの高さでしか表示されない背景動画は 2160 の解像度から得るものがありません。要素が実際に表示されるサイズに解像度を合わせてから、コーデックの話をしてください。

この読者にとって現実的な障害はここで、事前に見込んでおく価値があります。無料枠は 100 MB までのファイルを扱えます。30 秒のタイトルシーケンスの ProRes マスターは数ギガバイトになることがあり、H.264 のカメラ原本でも 4K で 1 分あたり約 350 メガバイトになります。

答えは、編集ソフトから軽い中間ファイルを書き出してそれを変換することです。適度なビットレートの 1080p の H.264 書き出しはマスターのほんの一部で、ブラウザーで確実にデコードでき、VP9 の符号化器にとっても十分な素材になります。ループする数秒だけをトリミングしておくと、たいていどんな符号化設定より効果があります。

1 つの video 要素の中に WebM を先、MP4 を後の順で入れておけば、ブラウザーが対応できるほうを自動的に選びます。ブラウザーは最初に復号できるソースを選ぶので、対応しているものは WebM を、それ以外は MP4 に自然に切り替わります。マークアップに 2 行加えるだけで、成功と障害の差になります。

背景動画としては、コーデック以上に属性の設定が重要になります。muted、playsinline、loop、そして preload は auto ではなく metadata にして、動画が最初の 1 秒間にテキストと帯域を奪い合わないようにします。同じ MOV から取った静止画をポスターに指定しておくと、それらが整うまでの間に表示されます。

スマートフォンで撮影した映像は、画素そのものが回転しているのではなく回転フラグを持っています。WebM のような Matroska 系のコンテナにはこのフラグを保存する場所がありません。そのため、この変換は実際にピクセルを回転させて正しい向きの映像として書き出します。管理していないページに埋め込む場合には望ましい挙動です。

注意すべきは CSS 側のアスペクト比です。1920×1080 と回転フラグで自称していたクリップが、本当に 1080×2160 の WebM になります。横向き用にスタイルされたコンテナだと、レターボックスがおかしな形になるので、カメラが申告していた寸法ではなく、出力の実際の寸法を確認してください。

VP9 の書き出しには VP9 のエンコーダーが必要で、これはこのページではなく OS が提供します。Chrome、Edge、Safari はほぼどの現行機にも搭載していますが、一部の Firefox、特に Linux 上のものは持っていないことがあり、その場合はファイルを選ぶ前にそう表示されます。

もう一方は入力側の問題です。ProRes や 10 ビットの Log 収録の MOV はブラウザーが持っていないデコーダーを必要とし、変換できないというメッセージで止まります。どちらの側にもソフトウェアによる代替は用意していません。WebAssembly にコンパイルしたコーデックは数十メガバイトあり、隣にあるハードウェアより一桁遅くなるからです。

このページが対象とする素材は、多くの場合まだ公開されていません。発売前の商品、クライアントの現場、公開前のショーリール、まだ放送されていないキャンペーンの一部。MOV を変換する一般的な方法は、検索結果から選んだコンバーターにアップロードすることで、それは未公開の素材を検証されていないサーバーに預けることになります。

ここではデコードも VP9 の符号化も同じタブの中で、その端末がすでに持っているコーデックを使って行われます。映像を運ぶ通信は発生せず、ネットワークタブで確かめられます。大きなファイルの変換速度が、アップロード回線の速度ではなくお使いの処理速度で決まるという実利もあわせて得られます。