share facebook facebook2 twitter menu hatena pocket slack

2011.11.10 THU

HTML5 ビデオ再生

小森隆太

WRITTEN BY 小森隆太

こんにちわ。
職人見習いの小森です。

今回は、HTML5のビデオ再生についてです。

○index.html


タブレットなども含め様々なブラウザに対応するために複数の形式のファイルを用意。
それでも再生出来なかった場合に表示するメッセージも記述しておきます。
controlsオプションをつけることにより、ブラウザが再生・ストップ・音量調整などの
コントローラーを自動的に付けてくれます。

また、自分で用意した画像を使って再生ボタンなどを作ることもできます。

○index.html


再生

○video.js

window.addEventListener("load",function(){

   if( !HTMLVideoElement ){
     return;       //HTML5 videoに対応してなければ処理終了
}
var v1 = document.getElementById("video1");

document.getElementById("playBtn").addEventListener("click"),function(){
v1.play();
},true);

},true);

画面読み込み時にボタンにクリックすると再生を実行する処理を登録します。

※この記事は、なかの人(spitz8008)が書いています。

小森隆太

小森隆太