R-SQUARE.net

研究開発部

videoで思い出にひたる

HTML5のvideo要素を使うことで、ブラウザにあれやこれやプラグインやアドオンを入れなくても動画再生できる。

サンプルソース

  <video controls autoplay muted poster="sumida_hanabi_2014.png">
    <source src='sumida_hanabi_2014.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
    <source src='sumida_hanabi_2014.ogv' type='video/ogg; codecs="theora, vorbis"'/>
  </video>


video要素の属性
属性説明
controls再生とか音量とかの制御盤を表示する。
autoplay自動で再生する。
muted消音。
poster代替画像のURL。source要素で指定した動画形式にブラウザが対応していない場合表示される。


動作例



まとめ

  • video要素を使うことで、ブラウザにあれやこれやプラグインやアドオンを入れなくても動画再生できる。
  • video要素の子要素として source要素を複数指定することで、複数の動画形式ファイルを指定できる。
  • ブラウザが対応している動画形式が見つかった時点でそれを再生して、あとはシカト。
  • プラグインやアドオンを入れなくてもよいので、訪問者はらくちん。
  • プラグインやアドオンを入れる手間を原因とする離脱を抑えることが期待できるはず。
  • どの動画形式に対応しているかは、ブラウザによってまちまちなので、一つの動画に対して複数種類の動画形式のファイルを作っておかなくちゃならない。作り手はめんどうっちゃめんどう。
  • ブラウザがvideo要素に対応しているからといって、どんな動画形式にも対応しているわけではないという罠。
last modified : 2017-07-11T22:22:26+09:00