JavaScriptからメディア要素を操作するサンプルソース
これらのメソッド、イベントを利用して独自のGUIを持った動画プレイヤーを作成してみましょう。
以下のサンプルでは<video>タグを利用した動画の埋め込み、及びJavaScriptを用いたボタンクリックによる動画の再生、一時停止、動画の拡大/縮小表示を実現し、更にスライダーによる再生位置の制御を行っています。
図2: 初期表示
図3: 拡大表示
図4: 縮小表示
図5: 標準表示
[video.html]
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" /> <title>video/audioサンプル</title> <script type="text/javascript" src="./js/video.js"></script> </head> <body onload="init()"> <!-- ビデオ --> <div style="text-align:center"> <video id="video1"> <source src="./media/mov.mp4" type="video/mp4" /> <source src="./media/mov.ogv" type="video/ogg" /> <source src="./media/mov.webm" type="video/webm" /> お使いのブラウザは video タグに対応していません<br /> ムービーダウンロードは<a href="./media/mov.mp4">こちら</a> </video> </div> <!-- プレイヤー --> <div style="text-align:center"> <button onclick="play()">再生</button> <button onclick="pause()">一時停止</button> <button onclick="showBig()">拡大</button> <button onclick="showSmall()">縮小</button> <button onclick="showNormal()">標準</button> <br /> <input type="range" id="seekbar" value="0" min="0" /> </div> </html> |
[video.js]
function init() {
// ビデオ要素
myVideo = document.getElementById("video1");
//シークバー
seekbar = document.getElementById("seekbar");
// ビデオデータの長さを取得
if(myVideo.readyState > 0){
seekbar.max = myVideo.duration;
} else {
myVideo.addEventListener("loadedmetadata", function() {
seekbar.max = myVideo.duration;
});
}
// シークバー制御による再生位置(秒数)設定
seekbar.addEventListener("change", function() {
myVideo.currentTime = seekbar.value;
}, false);
// 動画再生時のシークバー位置変更
myVideo.addEventListener("timeupdate", function() {
seekbar.value = myVideo.currentTime;
},false);
}
// 再生
function play(){
myVideo.play();
}
//一時停止
function pause(){
myVideo.pause();
}
// 拡大表示
function showBig(){
myVideo.height=(myVideo.videoHeight*1.5);
}
// 縮小表示
function showSmall(){
myVideo.height=(myVideo.videoHeight/1.5);
}
// 通常表示
function showNormal() {
myVideo.height=(myVideo.videoHeight);
}
|
尚、コンテンツを配信するWebサーバ上の設定によっては、動画ファイルが動画として認識されずブラウザで再生できない場合があるようです。
そのような場合は「.htaccess」と呼ばれる設定ファイルにおいて、以下のようにType追加を行ってください。
（文責:株式会社ベストクリエイト）
第1章 |  |
第2章 | |
第3章 | |
第4章 | |
