ウェブ用の動画ファイルを適切に準備しました。正しいサイズと解像度で作成し、 ブラウザごとに個別の 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>
<source> タグには、省略可能であっても常に type 属性を追加する必要があります。これにより、ブラウザは再生可能なファイルのみをダウンロードします。
この方法には、特にモバイルで、さまざまな 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 のブログをご覧ください。
ウェブページにメディアを追加する方法を学習したので、次は メディアのアクセシビリティについて学習しましょう。聴覚 障がい者向けに動画に字幕を追加したり、音声を再生できない場合に役立ちます。