ウェブ用に動画ファイルを適切に準備している。正しい寸法と解像度を指定している。ブラウザごとに個別の WebM ファイルと MP4 ファイルを作成しました。
動画を一般公開するには、ウェブページに追加する必要があります。これを適切に行うには、<video> 要素と <source> 要素の 2 つの HTML 要素を追加する必要があります。この記事では、これらのタグの基本に加えて、優れたユーザー エクスペリエンスを実現するためにこれらのタグに追加する必要がある属性について説明します。
単一のファイルを指定する
推奨されていませんが、動画要素を単独で使用することもできます。次のように、常に type 属性を使用します。ブラウザは、この情報を使用して、指定された動画ファイルを再生できるかどうかを判断します。変換できない場合は、囲まれたテキストが表示されます。
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
複数のファイル形式を指定する
メディア ファイルの基本で説明したように、すべてのブラウザが同じ動画形式をサポートしているわけではありません。<source> 要素を使用すると、ユーザーのブラウザでいずれかの形式がサポートされていない場合に備えて、複数の形式をフォールバックとして指定できます。
以下の例では、この記事の後半で例として使用する埋め込み動画を生成します。
<video controls>
<source src="chrome.webm" type="video/webm">
<source src="chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
type 属性は省略可能ですが、必ず <source> タグに追加する必要があります。これにより、ブラウザは再生可能なファイルのみをダウンロードします。
このアプローチには、特にモバイルの場合、異なる HTML またはサーバーサイド スクリプトを提供する方法に比べていくつかの利点があります。
- 優先度の高い順に形式を一覧表示できます。
- クライアントサイドの切り替えでは、レイテンシが短縮され、コンテンツを取得するためのリクエストは 1 回のみです。
- ユーザー エージェント検出でサーバーサイド サポート データベースを使用するよりも、ブラウザに形式を選択させる方が簡単で迅速であり、信頼性も高い可能性があります。
- 各ファイルソースのタイプを指定すると、ネットワーク パフォーマンスが向上します。ブラウザは、動画の一部をダウンロードしてフォーマットを「スニフ」しなくても、動画ソースを選択できます。
これらの問題は、帯域幅とレイテンシが重要で、ユーザーの忍耐力が限られているモバイル コンテキストでは特に重要です。type 属性を省略すると、サポートされていないタイプのソースが複数ある場合にパフォーマンスに影響する可能性があります。
詳細を確認する方法はいくつかあります。ウェブでの動画と音声の仕組みについて詳しくは、A Digital Media Primer for Geeks をご覧ください。また、DevTools のリモート デバッグを使用して、タイプ属性ありとタイプ属性なしのネットワーク アクティビティを比較することもできます。
開始時間と終了時間を指定する
帯域幅を節約し、サイトの応答性を高める: メディア フラグメントを使用して、動画要素に開始時間と終了時間を追加します。
メディア フラグメントを使用するには、メディアの URL に #t=[start_time][,end_time] を追加します。たとえば、動画を 5 秒から 10 秒まで再生するには、次のように指定します。
<source src="chrome.webm#t=5,10" type="video/webm">
<hours>:<minutes>:<seconds> で時間を指定することもできます。たとえば、#t=00:01:05 は動画を 1 分 5 秒の位置から開始します。動画の最初の 1 分間のみ再生するには、#t=,00:01:00 を指定します。
この機能を使用すると、複数のファイルをエンコードして配信しなくても、DVD のキューポイントのように、同じ動画で複数のビューを提供できます。
この機能が機能するには、サーバーが範囲リクエストをサポートし、その機能が有効になっている必要があります。ほとんどのサーバーでは、範囲リクエストがデフォルトで有効になっています。一部のホスティング サービスでは範囲リクエストが無効になっているため、サイト上でフラグメントを使用するために範囲リクエストが使用可能であることを確認する必要があります。
幸い、ブラウザのデベロッパー ツールで確認できます。たとえば Chrome では、[ネットワーク ペイン] にあります。Accept-Ranges ヘッダーを探して、bytes と表示されていることを確認します。この画像では、このヘッダーの周囲に赤い枠線を引いています。値として bytes が表示されない場合は、ホスティング プロバイダにお問い合わせください。
ポスター画像を含める
video 要素にポスター属性を追加すると、動画をダウンロードしたり再生を開始したりしなくても、要素が読み込まれるとすぐに視聴者にコンテンツの概要を把握してもらえるようになります。
<video poster="poster.jpg" ...>
…
</video>
動画 src が破損している場合や、指定された動画形式がサポートされていない場合、ポスターを代替として使用することもできます。ポスター画像の唯一の欠点は、追加のファイル リクエストが発生することです。これにより帯域幅が消費され、レンダリングが必要になります。詳細については、画像を効率的にエンコードするをご覧ください。
動画がコンテナから溢れないようにする
動画要素がビューポートに対して大きすぎると、コンテナからオーバーフローして、ユーザーがコンテンツを表示したり、コントロールを使用したりできなくなる可能性があります。
動画のサイズは 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 では、縦向きと横向きをスムーズに切り替えることができます。
iPad のデバイスの向きと Android 版 Chrome の向きが問題になる場合があります。たとえば、カスタマイズなしで iPad で横向きで再生される動画は次のようになります。
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 のブログをご覧ください。
ウェブページにメディアを追加する方法がわかったところで、次はメディアのユーザー補助について学びましょう。ユーザー補助では、聴覚障がいのあるユーザー向けに動画に字幕を追加したり、音声を再生できない場合に代替手段を提供したりします。