どうも！chuckです。
皆さん、HTML5使ってますか？？当たり前？それともまだ手をつけてない？？
僕自身、HTML5で使ったことあるのはCanvasくらい。なので、今日はHTML5の中でも気になっていたVideoタグを試してみましたヽ(=´▽`=)ﾉ
そもそもvideoタグって？
HTML5から追加された動画を埋め込めるタグです。従来はFlashなどのツールが必要でしたが、HTML5からはHTMLのみで動画を再生することができるようになりました。
動画ファイルの指定は、
- videoタグのsource属性を指定する
- videoタグ内でsourceタグを使用する
の２択があります。
その他の属性については以下のとおり。
poster属性:
動画のヒントとなる画像を表示。便利そう！
preload属性;
動画をあらかじめ読み込む。読み込んでおいても視聴されなかった無駄になるね…
autoplay属性:
動画を自動再生。うーん、急に始まる動画あるけど、ビックリするよね。
loop属性:
ループ再生を指定する。これは便利かも。
controls属性:
インターフェースを表示する。シークバーとか再生ボタンとか。
width属性、height属性:
動画の幅と高さ。
モダンブラウザはvideoタグをサポートしている模様。ただし、動画規格は統一されていないらしい。うーむ。
Chrome・Safari向けにmp4, Firefox・Opera向けにogg、Chrome・Opera向けにwebmを用意するのがよろしいらしい？？
参考にしたサイト様：
ただしこちらのサイト様によると、MP4で十分だとか。
IE8の場合にだけhtml5mediaというツールをロードしてあげる必要がある模様。
動画の準備
さて、サンプルとして使用する動画を調達します。今回サンプル動画を拝借するのはこちらのサイト様。
無料で良質な動画を配信してくれています。
実は今回videoタグを使ってみようと思ったきっかけって、このサイトを知ったからなんですよね。
こちらで以下のおしゃれな動画をDLしておきます。
All Setという名の日没の海の動画です。
実際に使ってみる。
ちなみにこちらが空のvideoタグ。<video></video>とのみ記述。デフォルトでは300px/150pxなんですね。canvasのデフォルト値と一緒のようです。
まずは単純に<source>タグを使って読み込んでみます。
きたー！※ただし画面サイズがめちゃめちゃデカイので縮小しました。
あれ、、、動いでない。MP4なんだけどな。。。
というわけでsourceタグを複数用意。
動かない…(´；ω；｀)
SafariとChromeで試すも、どちらも動かず。何かがおかしい。
上述のサイト様がわざわざコードを用意してくださっているので、コピペしてみる。
これで大丈夫だろうと思いきや、やはり動かない…＼(^o^)／
残念ながらタイムリミットが来てしまったので、また明日リベンジします！悔しい！
