読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

HTML5のvideoタグを試してみるも、敗北する

HTML

どうも!chuckです。

皆さん、HTML5使ってますか??当たり前?それともまだ手をつけてない??

 

僕自身、HTML5で使ったことあるのはCanvasくらい。なので、今日はHTML5の中でも気になっていたVideoタグを試してみましたヽ(=´▽`=)ノ

 

 

そもそもvideoタグって?

HTML5から追加された動画を埋め込めるタグです。従来はFlashなどのツールが必要でしたが、HTML5からはHTMLのみで動画を再生することができるようになりました。

 

動画ファイルの指定は、

  • videoタグのsource属性を指定する
  • videoタグ内でsourceタグを使用する

の2択があります。

その他の属性については以下のとおり。

 

poster属性:

 動画のヒントとなる画像を表示。便利そう!

preload属性;

 動画をあらかじめ読み込む。読み込んでおいても視聴されなかった無駄になるね…

autoplay属性:

 動画を自動再生。うーん、急に始まる動画あるけど、ビックリするよね。

loop属性:

 ループ再生を指定する。これは便利かも。

controls属性:

 インターフェースを表示する。シークバーとか再生ボタンとか。

width属性、height属性:

 動画の幅と高さ。

 

 

モダンブラウザはvideoタグをサポートしている模様。ただし、動画規格は統一されていないらしい。うーむ。

ChromeSafari向けにmp4, FirefoxOpera向けにoggChromeOpera向けにwebmを用意するのがよろしいらしい??

 

参考にしたサイト様:

www.htmq.com

 

ただしこちらのサイト様によると、MP4で十分だとか。

dtp.jdash.info

IE8の場合にだけhtml5mediaというツールをロードしてあげる必要がある模様。

 

 

動画の準備

さて、サンプルとして使用する動画を調達します。今回サンプル動画を拝借するのはこちらのサイト様。

www.coverr.co

無料で良質な動画を配信してくれています。

 

実は今回videoタグを使ってみようと思ったきっかけって、このサイトを知ったからなんですよね。

こちらで以下のおしゃれな動画をDLしておきます。

f:id:chuck0523:20150705154941p:plain

All Setという名の日没の海の動画です。

 

実際に使ってみる。

ちなみにこちらが空のvideoタグ。<video></video>とのみ記述。デフォルトでは300px/150pxなんですね。canvasのデフォルト値と一緒のようです。

 

f:id:chuck0523:20150705153125p:plain

まずは単純に<source>タグを使って読み込んでみます。

f:id:chuck0523:20150705155148p:plain

きたー!※ただし画面サイズがめちゃめちゃデカイので縮小しました。

 

あれ、、、動いでない。MP4なんだけどな。。。

 

というわけでsourceタグを複数用意。

f:id:chuck0523:20150705155340p:plain

 

動かない…(´;ω;`)

SafariChromeで試すも、どちらも動かず。何かがおかしい。

 

上述のサイト様がわざわざコードを用意してくださっているので、コピペしてみる。

f:id:chuck0523:20150705160328p:plain

 

これで大丈夫だろうと思いきや、やはり動かない…\(^o^)/

 

残念ながらタイムリミットが来てしまったので、また明日リベンジします!悔しい!