画像だけでなくウェブ向けのベーシックな動画で

基本的な動画をご覧ください。エンゲージメントを向上。

Doug Sillars

ウェブサイトに動画を追加することをご検討中ですか？デバイスとネットワーク接続が高速化、高性能化したことで、画像だけでなく、ウェブを構築するためのテクニックのツールボックスに動画を追加できるようになりました。調査によると、動画を含むウェブサイトはエンゲージメントと売上の向上につながることがわかっています。そのため、まだサイトに動画を追加していない場合でも、追加するのは時間の問題でしょう。

サイトに追加する動画ファイルは、ダウンロードされるファイルの中で最も大きいファイルになる可能性が高いため、そのため、すべてのユーザーが高速で安定して再生できるようにファイルを作成することが非常に重要です。動画はエンゲージメントと顧客満足度を向上させることができますが、動画が再生されない、または再生中に停止すると、お客様のフラストレーションにつながる可能性があります。この投稿では、動画配信での HTML5 <video> タグの使用に重点を置いているため、ストリーミング動画については説明しません。

では始めましょう。

<video> タグ

当然のことのように思えますが、動画を追加するには、<video> タグを追加してソースを指定すれば、レースを開始できます。

<video src="myVideo.mp4">

ご指摘のとおりです。ウェブに動画を追加するために必要なのは、大まかに言えばこれだけです。ただし、動画のタグに追加できる属性は多く、動画のレイアウトと配信を改善できます。

<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 分間の映画の場合、次のような違いがあります。

動画の配信効率を上げるには、ファイルのサイズが小さくなることがパフォーマンスの最適化の最も効果的です。小さい動画をダウンロードすると、動画の再生がより早く開始され、動画バッファがより早くいっぱいになります。これにより、動画再生中のストールが減少します。また、サーバー負荷が軽減されるため、複数の動画ファイルのストレージ要件の増加を補うことができます。

preload 属性

動画をローカルにダウンロードして保存するまで、動画の再生を開始することはできません。preload 属性を使用すると、ページの読み込み時にダウンロードする動画の量を制御できます。preload 属性には、auto、metadata、none の 3 つの値があります。

preload='auto'

'auto' を使用すると、ユーザーが再生ボタンを押したかどうかにかかわらず、動画全体がダウンロードされます。これにより、ユーザーが再生ボタンを押す前に動画がローカルにダウンロードされるため、動画をすばやく再生できます。データ使用量（およびサーバー負荷の観点から）この方法は、動画が視聴される可能性が高い場合にのみ使用する必要があります。そうしないと、動画全体をダウンロードする際のデータが無駄になります。

preload='metadata'

Chrome と Safari では、これがプリロードのデフォルト設定です。'metadata' を使用すると、動画の最初の 3% がダウンロードされます。これは 'auto' と同じ注意事項がありますが、動画の 3% のみをダウンロードすると、動画全体よりもサーバー / データ使用量が大幅に削減されます。また、動画の一部がローカルに保存されるため、動画の起動が速くなります。

preload='none'

この場合、データは大幅に節約されますが、設定状態にあるように 0 KB の動画がデバイスにローカルにプリロードされるため、再生が押されたときの動画の起動が遅くなります。存在するものの、再生される可能性が低い動画には、これが適切な設定です。これは、ユーザーがブラウザでライトモードを有効にしている場合にも使用されます。

ポスター

動画の再生が始まる前に、動画ウィンドウの上にポスター画像を表示するとします。

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">

ページに黒いボックスではなく写真を追加することで、ウェブサイトをより魅力的でインタラクティブなものにできます。ただし、poster 属性を使用すると、動画のダウンロードが開始される前に画像のダウンロードが追加されます。そのため、自動再生される動画にはポスターを追加しないことをおすすめします（追加のダウンロードにより動画のダウンロードが遅れるため）。

再生コントロール

controls 属性を追加すると、再生コントロールが追加されます。これらのボタンがないと、ユーザーは動画を開始または停止できません。動画の場合は、ユーザーが停止や一時停止、音量の変更などを行えるように、この機能を追加する必要があります。バックグラウンド動画やループ動画の場合は、この属性を省略できます。

ミュート中

muted 属性を使用すると、再生がミュート状態で開始されます。コントロールが指定されていない場合、再生全体でミュート状態になります。それが意図されている場合は、動画から音声トラックを削除することをおすすめします。これにより、お客様に配信される動画ファイルのサイズがさらに小さくなります。

コンテナやコーデックと同様に、音声ファイルの削除（デマルチプレクシング）もこの記事の範囲外です。手順については、メディアの操作に関するクイック リファレンスをご覧ください。

ループ

コンテンツをループする動画（アニメーション GIF など）を配信するには、loop 属性を追加します。通常、動画ファイルはアニメーション GIF よりもはるかに小さいため、このメカニズムを使用すると、GIF を動画ファイルに置き換えることができます。

動画の自動再生

動画をすぐに再生する場合（背景動画や、アニメーション GIF のようにループする動画など）は、autoplay 属性を追加します。

<video src="myVideo.mp4" playsinline autoplay>

ただし、モバイル ブラウザで動画を自動再生するには、muted 属性も追加する必要があります。

<video src="myVideo.mp4" playsinline autoplay muted>

まとめ

ウェブサイトに動画を追加するだけで、ユーザーとのエンゲージメントを高めることができますが、動画の再生が途切れることなくシームレスに行われるように、コンテンツを適切に配信することが重要です。<video> タグの組み込み属性を使用すると、ウェブサイトにアクセスするすべてのユーザーに、完璧な動画を配信できます。