html5のvideoで動画を再生してみた！！

動画を撮れるアプリでも・・て思った矢先に思いついたのがhtml5で追加されたvideoタグ。言われてみたら使用したこともない気がするので調べてみた。

そんでもって、javascript側から制御できればと思っていたので、とりあえずvideoタグについて調べてみた。

videoタグについて

これまでサイトで動画を扱いたい場合にはFlashやQuickTimeなど、外部プラグインを利用してましたが、HTML5ではvideoタグを使用することで動画を利用できるようになりました。

また、videoタグにはいろんな属性があるのですが、とりあえず最低限必要なのを設定しました。

最低限、幅と高さと動画のパスを指定してautoplayを指定しておけば、とりあえず動画は再生されます。もちろんそれだけだと不便なので後述します。

src属性	動画ファイルを指定する
poster属性	動画のヒントとなる画像を表示する
preload属性	動画をあらかじめ読み込む（auto、metadata、none）
autoplay属性	動画を自動再生する
loop属性	ループ再生を指定する
controls属性	インターフェースを表示する

上記の表で大体の意味は分かるのもあるので、いくつか説明しておきます。ちなみにすべての属性を指定した場合は下記のようになります。

videoタグに指定するとページが読み込まれた時点で動画が自動的に再生されます。

ユーザーが環境により動画が見れない場合などに、動画の内容が分かるような画像を指定する事ができます。

ページが読み込まれた時点で裏側で動画の読み込み処理を行います。デフォルトでautoが指定されてるので、あまり指定することは無いかもしれません。

metadataを指定した場合は、動画のサイズ・最初のフレーム・トラックリスト・再生時間などの動画のメタデータのみを取得します。

動画を読み込む必要性が無ければnoneを指定します。

ブラウザ側で自動的に「再生・一時停止・再生位置の移動・ボリューム・全画面表」などのインターフェースが追加されます。＊ただブラウザによって表示されるインターフェースが違うため、Firefoxでは全画面表示のボタンが無いということもある。

まだまだvideoタグがサポートされていないブラウザを仕様しているユーザーも多いと思われる。その場合にvideoタグの間にメッセージを記述することができる。

サンプルでは動画ファイルはmp4を利用しているがブラウザやバージョンによって再生できたり出来なかったり・・そのような場合のためにsourceタグを利用してフォーマットの異なる動画データを複数指定することで、再生できるフォーマットを自動的に再生してくれる。

メディアファイルのMINEタイプを指定しておくことで、ブラウザが事前にそのファイルが再生可能かどうか判断できるので、トラフィックの軽減につながるとの事

その他にもmedia属性とかありますが、デフォルトでallになっているので省略しております。詳細は「HTML5/埋め込み/source要素形式の異なる複数の再生候補を指定する – TAG index Webサイト」を参考にしてください。