Blog

html5でのvideoタグの扱い方①

2013.01.23Cat:html5 デザイナー

webサイトで動画を使用したい場合、
プレイヤーが必要になってきます。
そのプレイヤーは、ASPのサービスなのか、プラグインを使うか、
もしくは、youtube等のサイトにUPしてそのリンクを貼る、といった方法があります。

しかし、html5では、動画を簡単に利用することができます。
videoタグを貼るだけでよくなりました!

動画を表示する

表示するだけなら、

これでOKになりました!

さらに、以下のようにすると、

ブラウザが対応していない場合、メッセージを見せることができます。

実は、対応している動画の形式がブラウザ毎で違っており、
全てのブラウザで見せたい場合は、全ての動画を読みこませなければなりません。
(※IEは見れません!!)

その場合は、

とします。

ちなみに、
mp4形式 → Google Chrome・Safari向け
ogv形式 → Firefox・Opera向け
webm形式 → Google Chrome・Opera向け
となります。

これで「表示」はOKです!
そう表示はOKなんですが、これだと動画は再生されません。
動画を操作するボタン等が一切ないためです。

動画を操作できるように設定

操作できるようにするためには、以下のようにします。

もうこれを設定するだけで、
再生ボタン、停止ボタン、音量ボタン、全画面表示、再生位置のバー等が
表示され使用することができます。
(ブラウザによって異なります)

その他にも属性がいろいろあります。

videoタグの属性

src 動画ファイルのパス
poster 動画が再生可能になる前に表示させたい画像のパス
autoplay 動画を自動再生にする
loop 動画が終了したら、また最初に戻って再生を続ける
controls 動画を操作する要素を表示する
width 動画の横幅を指定
height 動画の高さを指定

sourceタグっていうの厳密には、videoタグの属性ではなく、
videoタグ内で使用出来る要素のようです。

全部つけてみると以下のようになります。

大変便利ですね〜〜
早く堂々と使えるようになりたいですね!!

しかし、これだと、ブラウザによって、操作のボタン等のデザインが違いますし、
機能も制限されちゃってます。

自分でいろいろカスタマイズしたい場合はどうするのかというと、
javascriptを使用する必要があります。

その辺のお話は、また次回ということで
今回はこれで失礼させて頂きます!

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ