HTML5の動画再生機能を利用する

HTML5では「video要素」が追加され、Flashなどのプラグインを利用しなくても動画の再生が行えるようになった。ただ、まだ発展途上であり、ブラウザにより動作が異なる点もあり、利用には注意を要する。

  • 基本的な使い方
  • 新たに導入された要素’video’を使って、

    <video src="xxx.mp4" autoplay>
    

    と記述してページを表示すれば、xxx.mp4の再生が自動的に始まる。autoplayは自動再生を指示する属性で、これ以外に次の属性がある。
    ・controls:再生・一時停止などのGUIを表示する
    ・poster:ユーザに内容を知らせるヒントとなる画像を指定する。(ブロードバンド環境ではおそらく不要と思われる)
    ・preload:あらかじめ動画を読み込むかを指定。(デフォルトでtrueなのでおそらくそのままでよい)

  • 動画の指定方法
  • ブラウザによってサポートするコーデックが異なるため、1つの動画ファイルで全てのブラウザに対応するのは難しい状況で、現時点では複数の形式で用意しておくのが一般的なようだ。具体的には、source要素を使って複数のsrcを記述することで対応する。

    <video>
      <source type="video/mp4" src="xxx_x264.mp4"> <!-- for chrome -->
      <source type="video/webm" src="xxx.webm">   <!-- for firefox -->
      <p>No available data</p>
    </video>
    

    これにより、ブラウザが複数の候補から再生可能な形式を探してくれる。(上から順に調べるので、記述順序がそれなりに重要。) また再生可能な形式がない場合はp要素で指定した内容が表示される。

  • 動画の再生方法(JavaScript)
  • 自動再生ないしはユーザの直接操作によらない場合は、コードで動画を再生することになる。再生したいvideo要素に videoHTML5というid名を付けた場合、以下のようにして再生する。

     // JavaScript版
     var video = document.getElementById("videoHTML5");
     video.play();
     // jQuery版
     var playerH5 = $('#videoHTML5').get(0);
     playerH5.play();
    
  • ブラウザによる見た目の違い
  • control属性をtrueにすることで表示される「プレイヤー」はブラウザが提供しているものなので、ブラウザの種類によって当然異なる。(左がchrome、右がfirefox)

      xtestvideo_a02
    • xtestvideo_a01
  • その他
  • 動画形式によっては、サーバ側の設定(.htaccess)が必要な場合がある。現在画像の置き場所に使っているサーバは、webM形式の動画は対応していなかった。

カテゴリー: Tips タグ: , パーマリンク