このページは Cloud Translation API によって翻訳されました。

<video> タグと <source> タグ

Derek Herman

Joe Medley

Sam Dutton

ウェブ用に動画ファイルを適切に準備している。正しい寸法と解像度を指定している。ブラウザごとに異なる WebM ファイルと MP4 ファイルを作成しました。

ウェブページに動画を追加して、誰でも動画を閲覧できるようにする必要があります。これを適切に行うには、<video> 要素と <source> 要素の 2 つの HTML 要素を追加する必要があります。この記事では、これらのタグの基本に加えて、優れたユーザーエクスペリエンスを実現するためにこれらのタグに追加する必要がある属性について説明します。

単一のファイルを指定する

推奨されませんが、video 要素のみを単独で使用することもできます。次のように、常に type 属性を使用します。ブラウザはこれを使用して、提供された動画ファイルを再生できるかどうかを判断します。変換できない場合は、囲まれたテキストが表示されます。

<video src="chrome.webm" type="video/webm">
    <p>Your browser cannot play the provided video file.</p>
</video>

複数のファイル形式を指定する

メディアファイルの基本で説明したように、すべてのブラウザが同じ動画形式をサポートしているわけではありません。<source> 要素では、ユーザーのブラウザがいずれかの形式をサポートしていない場合の代替手段として、複数の形式を指定できます。

次の例では、この記事の後半で例として使用する埋め込み動画を生成します。

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.</p>
</video>

Glitch で試してみる

注: 上記の例では、controls 属性が導入されています。これにより、ユーザーが動画の再生を制御できるようにします。たとえば、音量の調整、再生位置の移動、字幕の選択、再生の一時停止 / 再開などが可能です。

type 属性は省略可能ですが、必ず <source> タグに追加する必要があります。これにより、ブラウザは再生可能なファイルのみをダウンロードします。

このアプローチは、特にモバイル端末でさまざまな HTML やサーバー側スクリプトを配信する場合に、次のようなメリットがあります。

優先度の高い順にフォーマットをリストできます。
クライアントサイドで切り替えることで、コンテンツを取得する際にリクエストが 1 つだけ生成されるため、待ち時間が短縮されます。
ユーザーエージェントの検出機能を備えたサーバー側のデータベースを使用するよりも、ブラウザ側で形式を選択する方が簡単で時間がかからず、信頼性も高くなる場合があります。
各ファイルのソースタイプを指定すると、ネットワークのパフォーマンスが向上します。ブラウザ側で動画の一部をダウンロードして形式を調べなくても、動画ソースを選択できるためです。

これらの問題は、帯域幅とレイテンシが重要視され、ユーザーの忍耐に限界があるモバイルコンテキストでは特に重要です。type 属性を省略すると、サポートされていないタイプのソースが複数ある場合にパフォーマンスに影響する可能性があります。

詳細を確認する方法はいくつかあります。ウェブ上の動画とオーディオの仕組みについては、A Digital Media Primer for Geeks をご覧ください。また、DevTools のリモートデバッグを使用して、type 属性がある場合とtype 属性がない場合のネットワークアクティビティを比較することもできます。

開始時間と終了時間を指定する

帯域幅を節約し、レスポンシブなサイトを構築しましょう。それには、メディアフラグメントを使用して、video 要素に開始時間と終了時間を追加します。

メディアフラグメントを使用するには、メディアの URL に #t=[start_time][,end_time] を追加します。たとえば、5～10 秒間だけ動画を再生するには、次のように指定します。

<source src="video/chrome.webm#t=5,10" type="video/webm">

<hours>:<minutes>:<seconds> で時間を指定することもできます。たとえば、#t=00:01:05 は動画を 1 分 5 秒の位置から開始します。動画の最初の 1 分間だけ再生するには、#t=,00:01:00 を指定します。

この機能を使用すると、複数のファイルをエンコードして配信しなくても、1 つの動画で複数のビュー（DVD のキューポイントなど）を配信できます。

この機能が機能するには、サーバーが範囲リクエストをサポートし、その機能が有効になっている必要があります。ほとんどのサーバーでは、範囲リクエストがデフォルトで有効になっています。一部のホスティングサービスでは範囲リクエストが無効になっているため、サイト上でフラグメントを使用するために範囲リクエストが使用可能であることを確認する必要があります。

幸い、ブラウザのデベロッパーツールで確認できます。たとえば Chrome では、[ネットワークペイン] にあります。Accept-Ranges ヘッダーを探して、bytes と表示されていることを確認します。この画像では、このヘッダーの周囲に赤い枠線を引いています。値として bytes が表示されない場合は、ホスティングプロバイダにお問い合わせください。

Chrome DevTools のスクリーンショット: Accept-Ranges: bytes。 — Chrome DevTools のスクリーンショット: Accept-Ranges: bytes

ポスター画像を含める

video 要素に poster 属性を追加しておくと、視聴者は動画をダウンロードまたは再生しなくても、要素が読み込まれた時点で動画の内容を把握できます。

<video poster="poster.jpg" ...>
  …
</video>

動画 src が破損している場合や、提供された動画形式がいずれもサポートされていない場合、ポスターをフォールバックにすることもできます。ポスター画像の唯一の欠点は、追加のファイルリクエストです。これにより帯域幅が消費され、レンダリングが必要になります。詳細については、画像を効率的にエンコードするをご覧ください。

すべきでないこと

代替ポスターがない場合、動画は壊れているように見えます。

すべきこと

フォールバックポスターを使用すると、最初のフレームがキャプチャされたように見えます。

動画がコンテナからはみ出さないようにする

ビューポートに対して動画要素が大きすぎるとコンテナからはみ出してしまい、ユーザーがコンテンツを見たり、操作ができなくなることがあります。

Android Chrome のスクリーンショット、縦向き: スタイルが設定されておらずビューポートからはみ出している動画要素。

Android Chrome のスクリーンショット、横向き: スタイルが設定されておらずビューポートからはみ出している動画要素。

動画のサイズは CSS を使用して制御できます。CSS ですべてのニーズを満たせない場合は、JavaScript ライブラリや FitVids などのプラグインを使用できます。YouTube やその他のソースの動画でも使用できます。残念ながら、これらのリソースはネットワークペイロードサイズを増加させ、収益とユーザーの財布に悪影響を及ぼす可能性があります。

ここで説明するような単純な用途の場合は、CSS メディアクエリを使用して、ビューポートのサイズに応じて要素のサイズを指定します。max-width: 100% を使用すると便利です。

iframe 内のメディアコンテンツ（YouTube 動画など）には、レスポンシブアプローチ（John Surdakowski が提案している手法など）を試してみてください。

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

<div class="video-container">
  <iframe
    src="//www.youtube.com/embed/l-BA9Ee2XuM"
    frameborder="0"
    width="560"
    height="315"
  ></iframe>
</div>

試してみる

レスポンシブなサンプルとレスポンシブではないバージョンを比較します。ご覧のとおり、応答しないバージョンではユーザーエクスペリエンスが損なわれます。

デバイスの向き

デバイスの向きは、デスクトップモニターやノートパソコンでは問題になりませんが、モバイルデバイスやタブレット用のウェブページのデザインを検討する際は非常に重要です。

iPhone の Safari は、縦向きと横向きの切り替えが非常にスムーズです。

iPhone の Safari で再生している動画のスクリーンショット（縦向き）。

iPhone の Safari で再生している動画のスクリーンショット（横向き）。

iPad や Android の Chrome では、デバイスの向きが問題になることがあります。たとえば、横向きの iPad での動画の再生をカスタマイズしないと、次のように表示されます。

iPad の Safari で再生している動画のスクリーンショット（横向き）。 — iPad の Safari で再生している動画のスクリーンショット、横向き。

CSS で動画を width: 100% または max-width: 100% と設定すると、デバイスの向きによるレイアウトの問題の多くは解決できます。

自動再生

autoplay 属性は、ブラウザが動画をすぐにダウンロードして再生するかどうかを制御します。具体的な仕組みは、プラットフォームとブラウザによって異なります。

Chrome: パソコン上で表示しているかどうかや、モバイルユーザーがサイトやアプリをホーム画面に追加したかどうかなど、複数の要素によって決まりますが、これらに限定されません。詳しくは、自動再生に関するおすすめの方法をご覧ください。
Firefox: すべての動画と音声をブロックしますが、ユーザーはすべてのサイトまたは特定のサイトについて、これらの制限を緩和できます。詳しくは、Firefox でメディアの自動再生を許可またはブロックするをご覧ください。
Safari: 従来はユーザー操作が必要でしたが、最近のバージョンではその要件が緩和されています。詳しくは、iOS の新しい <video> ポリシーをご覧ください。

自動再生が可能なプラットフォームでも、この機能を有効にするべきか検討する必要があります。

データ使用のコストは高くなる場合があります。
ユーザーが希望する前にメディアを再生すると、帯域幅と CPU が占有され、ページのレンダリングが遅くなる可能性があります。
ユーザーが動画や音声の再生を煩わしく感じる可能性もあります。

プリロード

preload 属性は、プリロードする情報やコンテンツの量に関するヒントをブラウザに提供します。

値	説明
`none`	ユーザーが動画を視聴しないことを選択する可能性があるため、何もプリロードしないでください。
`metadata`	最小限の動画のメタデータ（時間、サイズ、テキストトラック）をプリロードします。
`auto`	すぐに動画全体をダウンロードすることをおすすめします。空の文字列でも同じ結果になります。

preload 属性の効果は、プラットフォームによって異なります。たとえば、Chrome では、パソコンでは 25 秒の動画をバッファしますが、iOS や Android ではバッファしません。つまり、モバイル端末では再生開始まで時間がかかる場合がありますが、デスクトップではすぐに再生されるということです。詳しくは、音声と動画のプリロードによる高速再生または Steve Souders のブログをご覧ください。

ウェブページにメディアを追加する方法がわかったところで、次はメディアのユーザー補助について学びましょう。ユーザー補助では、聴覚障がいのあるユーザー向けに動画に字幕を追加したり、音声を再生できない場合に代替手段を提供したりします。