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

html5

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

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

videoタグについて

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

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

videoタグの属性について

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

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

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

autoplay属性

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

poster属性

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

preload属性

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

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

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

controls属性

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

もし、ユーザーが動画を見れない環境だった場合の配慮

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

sourceタグでフォーマットの異なる動画データを複数指定

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

MINEタイプについて

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

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