JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5のvideo要素で使える主な動画形式とsourceタグの使い方

HTML5でサポートされる動画形式

現在のHTML5ドラフト仕様では、<video>タグにおいてブラウザがどの動画形式をサポートすべきかは明確には定められていません。しかし、実務で最も広く使われている動画形式は以下の通りです。

  • Ogg — Theora映像コーデックとVorbis音声コーデックを組み合わせたOggファイル。
  • MPEG4 — H.264映像コーデックとAAC音声コーデックを組み合わせたMPEG4ファイル。

なお、近年はGoogleが中心となって策定されたWebM形式(VP8/VP9映像コーデック+Vorbis/Opus音声コーデック)も主要ブラウザで広くサポートされています。Ogg・MPEG4・WebMの3つを組み合わせて提供すれば、ほぼすべての環境で動画を再生できるようになります。

sourceタグによるメディアの指定

<source>タグを使うことで、再生するメディアファイルに加えて、メディアタイプ(type属性)をはじめとするさまざまな属性を指定できます。

video要素の中には複数のsource要素を記述することが可能で、ブラウザはその中から最初に認識できた形式を自動的に選択して再生します。

サンプルコード

<!DOCTYPE HTML>
<html>
   <body>
      <video width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the video element.
      </video>
   </body>
</html>

この例では、まずOgg形式(foo.ogg)の再生が試みられ、ブラウザが対応していない場合にはMPEG4形式(foo.mp4)が使用されます。さらに、どちらの形式にも対応していない環境では、video要素内に記述した「Your browser does not support the video element.(お使いのブラウザはvideo要素をサポートしていません)」というフォールバックテキストが表示されます。

このように複数の形式を用意しておくことで、ブラウザごとの違いに左右されず、幅広いユーザーに安定した動画再生体験を提供できます。

  1. JavaScriptのフローチャートでwhileループをわかりやすく図解する方法

    whileループの目的は、指定した条件式がtrue（真）である限り、ステートメントやコードブロックを繰り返し実行することです。条件式がfalse（偽）と評価された時点で、ループは自動的に終了します。 whileループの基本構造 JavaScriptにおけるwhileループは、次のような構文で記述します。 while (条件式) { // 繰り返し実行される処理 } フローチャートで見るwhileループの流れ whileループの動作をフローチャートで表すと、処理の流れがひと目で把握できます。フローチャートは主に以下の要素で構成されています。 開始： 処理全体の起点となるノードです。 条件判

  2. CSS3のtransformで実現！要素の2D変換の基本と使い方

    2D変換とは？CSS3の2D変換（2D Transform）は、translate（移動）、rotate（回転）、scale（拡大・縮小）、skew（傾斜）などの関数を使って、HTML要素の位置や形状を自由に変更できる機能です。これらの変換を組み合わせることで、従来はJavaScriptが必要だった視覚効果を、CSSだけで手軽に実現できます。主な2D変換関数一覧No.値と説明1matrix(n,n,n,n,n,n)6つの値を指定して、行列による変換を定義します。2translate(x,y)X軸・Y軸の両方向に沿って要素を移動させます。3translateX(n)X軸方向に沿って要素を移動させ