動画 動画を追加する 複数のファイル形式を指定する

すべてのブラウザが全ての動画形式をサポートしていません。
要素では、ユーザーのブラウザがいずれかの形式をサポートしていない場合の代替として、複数の形式を指定します。

例
    <video controls>
      <source src="chrome.webm" type="video/webm">
      <source src="chrome.mp4" type="video/mp4">
      <p>このブラウザは、video要素をサポートしていません。</p>
    </video>

 
ブラウザはオプションの type 属性を使用しタグの解析をおこない、どのファイルをダウンロードし、再生をするか判断します。
例の場合、ブラウザが WebM をサポートしている場合は chrome.webm で再生をします。
サポートしていない場合は MPEG-4 動画で再生します。
ウェブで動画と音声を使用する方法については、デジタル動画に関する、楽しくてためになる解説動画を参考にしてください。
これは、特に携帯端末でさまざまな HTML やサーバー側スクリプトを配信する場合に、次の4つのメリットがあります。

• デベロッパーが優先順位に基づいて形式を指定できる。
• ネイティブ クライアント側で切り替える為、コンテンツ取得リクエストが 1 つ生成するだけですみ、ロード時間が短縮できる。
• サーバー側でユーザー エージェントの検出機能とサポート データベースを使用するより、ブラウザで形式を選択する方がより簡単で迅速であり、信頼性も高くなります。
• ファイルごとにソースのタイプを指定するとブラウザが動画の一部をダウンロードして形式を識別しなくてすみ、ブラウザが動画ソースを選択する為にネットワークのパフォーマンスが向上します。

特にモバイルコンテンツは、帯域幅とロード時間が重視されます。
モバイル コンテキストではユーザーが我慢する局面がある場合、ユーザーエクスペリエンスが著しく低下する為、特に重要です。
type 属性を指定しない場合、複数ソースの中にサポートされていないタイプが存在すると、パフォーマンスに影響を及ぼします。
モバイル ブラウザ デベロッパー ツールを使用して、type 属性がある場合と type 属性がない場合でネットワークのアクティビティを比べてみましょう。
 また、ブラウザ デベロッパー ツールでレスポンス ハンドラを確認し、サーバーが適切な MIME タイプを報告することを確認します。
これが無いと動画のソースタイプのチェックが機能しません。





関連記事

• 動画要素を追加する
• 複数のファイル形式を指定する
• 開始時刻と終了時刻を指定する
• ポスター画像を含める