基本的な動画について学ぶ。エンゲージメントを向上。
ウェブサイトに動画を追加することをご検討の場合は、デバイスやネットワーク接続の高速化と高度化に伴い、画像だけでなく、ウェブを構築する技術のツールボックスに動画を追加できるようになりました。調査によると、動画を含むウェブサイトはエンゲージメントや売上の向上につながることがわかっています。したがって、サイトに動画をまだ追加していない場合でも、あとは追加するまでの時間が長くなるだけです。
ほとんどの場合、サイトに追加する動画ファイルは、ダウンロードされるファイルの中で最も大きいものになります。そのため、すべてのユーザーが高速かつ安定して再生できるようにファイルを作成することが非常に重要です。動画によってエンゲージメントと顧客満足度は向上しますが、動画が再生されない、または再生中に停滞すると、顧客の不満につながる可能性があります。この記事では、動画の配信に HTML5 <video> タグを使用する方法について説明します。そのため、ストリーミング動画は扱いません。
では始めましょう。
<video> タグ
当然のことのように思えますが、動画を追加するには、<video> タグを追加してソースをポイントする必要があります。これで準備は完了です。
<video src="myVideo.mp4">
そのとおりです。ウェブへの動画の追加に必要なのは、ここまでの作業だけです。ただし、動画のレイアウトと配信を改善するために、video タグに追加できる属性は数多くあります。
<source> タグ
ウェブ上での動画配信を改善する最善の方法は、ブラウザに配信されるファイルを最適化することです。これを行うには、<source> タグを使用します。
<video>
<source src="myWebmVideo.webm" type="video/webm">
<source src="myh265Video.mp4" type="video/mp4">
<source src="myh264Video.mp4" type="video/mp4">
</video>
3 つの異なるソースファイルを参照します。ブラウザは一番上から開始し、最初に使用できる形式とコーデックを選択します。動画の世界では、通常コンテナと呼ばれるファイル形式を、それぞれ異なる属性を持つさまざまなコーデックで保存できます。（詳しくはこちらをご覧ください）。上記の例では、最初の選択肢は WebM 形式（VP8 または VP9 コーデックでエンコード可能）であり、（執筆時点で）グローバル ユーザーの 78% によってサポートされています。2 つ目は mp4 の H.265 コーデックで、iOS 以降の Mac に対応しています。これらのコーデックは新しく、データ圧縮が改善されており、古い動画形式と同じ品質の動画を配信します。
最後の選択肢は H.264 mp4 です。これは、すべてのグローバル ユーザーの 92% がサポートしていることを誇りますが、古い形式であるため、一般に WebM や H.265 動画よりもはるかに大規模です。一例として、2 分間の映画の場合の違いを以下に示します。
| コーデック | ファイルサイズ |
|---|---|
| VP8 | 5.5 MB |
| VP9 | 4.2 MB |
| H.265 | 5.4 MB |
| H.264 | 16.1 MB |
動画の配信を改善するには、ファイルのサイズを小さくすることでパフォーマンスを最適化できます。小さい動画がダウンロードされると、動画の再生が早くなり、動画バッファがいっぱいになるまでの時間も短くなります。これにより、動画の再生中の停止が少なくなります。さらに、複数の動画ファイルの増大するストレージ要件を補う、サーバーの負荷も減少します。
preload 属性
動画がダウンロードされてローカルに保存されるまで、動画の再生を開始できません。preload 属性を使用すると、ページの読み込み時にダウンロードされる動画の量を制御できます。プリロード属性には、auto、metadata、none の 3 つの値があります。
preload='auto'
'auto' を使用すると、ユーザーが再生を押したかどうかにかかわらず、動画全体がダウンロードされます。これにより、ユーザーが再生ボタンを押す前に動画がローカルにダウンロードされるため、動画を高速に再生できます。データ使用量（とサーバーの負荷）については、動画を視聴する可能性が高い場合にのみ使用してください。そうしないと、動画全体のダウンロードのすべてのデータが無駄になります。
preload='metadata'
これは Chrome と Safari でのプリロードのデフォルト設定です。'metadata' を使用すると、動画の最初の 3% がダウンロードされます。これは 'auto' でも注意点がありますが、動画のわずか 3% をダウンロードする方が、動画全体をローカルに保存するよりもサーバーやデータの使用コストを大幅に削減できます。
preload='none'
これにより、ほとんどのデータが保存されますが、再生が押されたときの動画の起動が遅くなります。設定にあるように、0 KB の動画がデバイスにローカルにプリロードされるためです。存在するものの再生される可能性が低い動画の場合、適切な設定です。これは、ユーザーがブラウザでライトモードを有効にしている場合にも使用できます。
poster
動画の再生が始まる前に動画ウィンドウの上にポスター画像を表示することをおすすめします。
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
ポスターのない動画は、開始前に黒い画面が表示されます。
ポスターのある動画の方が魅力的です。
ページに黒いボックスではなく写真を追加することで、ウェブサイトをより魅力的でインタラクティブなものにできます。ただし、poster 属性を使用すると、動画のダウンロードが開始される前に画像のダウンロードが追加されます。そのため、自動再生される動画にはポスターを追加しないことをおすすめします（追加ダウンロードを行うと動画のダウンロードが遅れるため）。
再生コントロール
controls 属性を追加すると、再生コントロールが追加されます。これらがないと、ユーザーは動画を開始または停止できません。ユーザーが停止と一時停止、音量の変更などができるように、これを動画に追加する必要があります。バックグラウンドまたはループする動画では、この属性を省略できます。
ミュート中
muted 属性を使用すると、ミュート状態で再生が開始されます。コントロールを指定しない場合、再生中はミュートのままになります。その場合は、動画から音声トラックを削除することをおすすめします。これにより、顧客に配信される動画ファイルのサイズがさらに小さくなります。
コンテナやコーデックと同様に、音声ファイルの削除（デマルチュックスとも呼ばれます）はこの記事の対象外です。手順については、メディア操作のクイック リファレンスをご覧ください。
ループ
コンテンツをループ再生する動画（アニメーション GIF など）を配信するには、loop 属性を追加します。通常、動画ファイルはアニメーション GIF よりもはるかに小さいため、このメカニズムにより、GIF を動画ファイルに置き換えることができます。
自動再生動画
動画をすぐに再生したい場合（たとえば、バックグラウンド動画やアニメーション GIF のようにループする動画として）、autoplay 属性を追加できます。
<video src="myVideo.mp4" autoplay>
ただし、モバイル ブラウザで動画を自動再生するには、muted 属性も追加する必要があります。
<video src="myVideo.mp4" autoplay muted>
おわりに
ウェブサイトに動画を追加するだけで、ユーザーのエンゲージメントの新たな領域が広がりますが、コンテンツを適切に提供し、動画が途切れることなくシームレスに再生されるようにすることが重要です。<video> タグの組み込み属性を使用すると、ウェブサイトを訪問するすべてのユーザーに完璧な動画を提供できます。