html5でのvideoタグの扱い方①
webサイトで動画を使用したい場合、
プレイヤーが必要になってきます。
そのプレイヤーは、ASPのサービスなのか、プラグインを使うか、
もしくは、youtube等のサイトにUPしてそのリンクを貼る、といった方法があります。
しかし、html5では、動画を簡単に利用することができます。
videoタグを貼るだけでよくなりました！
動画を表示する
表示するだけなら、
|
1 | <video src="sample.mp4"></video> |
これでOKになりました！
さらに、以下のようにすると、
|
1 2 3 | <video src="sample.mp4"> <p>動画が見れない場合(ブラウザが対応していない場合)これが表示されます。</p> </video> |
ブラウザが対応していない場合、メッセージを見せることができます。
実は、対応している動画の形式がブラウザ毎で違っており、
全てのブラウザで見せたい場合は、全ての動画を読みこませなければなりません。
（※IEは見れません！！）
その場合は、
|
1 2 3 4 5 | <video> <source src="sample.mp4"> <source src="sample.ogv"> <source src="sample.webm"> </video> |
とします。
ちなみに、
mp4形式 → Google Chrome・Safari向け
ogv形式 → Firefox・Opera向け
webm形式 → Google Chrome・Opera向け
となります。
これで「表示」はOKです！
そう表示はOKなんですが、これだと動画は再生されません。
動画を操作するボタン等が一切ないためです。
動画を操作できるように設定
操作できるようにするためには、以下のようにします。
|
1 2 3 4 5 | <video control="control" > <source src="sample.mp4"> <source src="sample.ogv"> <source src="sample.webm"> </video> |
もうこれを設定するだけで、
再生ボタン、停止ボタン、音量ボタン、全画面表示、再生位置のバー等が
表示され使用することができます。
（ブラウザによって異なります）
その他にも属性がいろいろあります。
videoタグの属性
| src | 動画ファイルのパス |
|---|---|
| poster | 動画が再生可能になる前に表示させたい画像のパス |
| autoplay | 動画を自動再生にする |
| loop | 動画が終了したら、また最初に戻って再生を続ける |
| controls | 動画を操作する要素を表示する |
| width | 動画の横幅を指定 |
| height | 動画の高さを指定 |
sourceタグっていうの厳密には、videoタグの属性ではなく、
videoタグ内で使用出来る要素のようです。
全部つけてみると以下のようになります。
|
1 | <video src="sample.mp4" autoplay="autoplay" controls="controls" poster="sample.jpg" loop="loop" width="500" height="500"></video> |
大変便利ですね〜〜
早く堂々と使えるようになりたいですね！！
しかし、これだと、ブラウザによって、操作のボタン等のデザインが違いますし、
機能も制限されちゃってます。
自分でいろいろカスタマイズしたい場合はどうするのかというと、
javascriptを使用する必要があります。
その辺のお話は、また次回ということで
今回はこれで失礼させて頂きます！
Author Profile
スターフィールド編集部
SHARE
