html5でのvideoタグの扱い方②
前回、html5のvideoタグについて書きましたが、
今回は、そのvideoをjavascriptで扱う方法を書きたいと思います。
操作の内容としては、
・動画の再生
・動画の停止
・音量上げ/下げ
・ミュート
・再生位置を表示
・動画の長さを表示
・動画終わりの処理
・再生位置を始めに戻す
になります。
HTMLを以下とした場合で書いていきます。
デモはないです・・・
|
1 2 3 4 5 6 7 8 9 10 11 12 | <video id="video"> <source src="../test.mp4" type="video/mp4" /> <source src="../test.webm" type="video/webm" /> </video> <p class="videoPlay">再生</p> <p class="videoPause">停止</p> <p class="volumeUp">↑</p> <p class="volumeDown">↓</p> <p class="volumeMute">ミュート</p> <p class="currentTime">再生位置：<span></span></p> <p class="videoTime">動画の長さ：<span></span></p> <p class="restart">はじめから再生</p> |
では、一気に書いちゃいます。
ちなみに時折jQueryを使用していますw
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | $(function(){ var video; video = document.getElementById("video"); var vol = video.volume; //再生位置を表示（秒数を表示） video.addEventListener("timeupdate",nowTime,false); //再生完了の処理 video.addEventListener("ended",endMovie,false); //動画の再生 $(".videoPlay").click(function(){ video.play(); }); //動画の停止 $(".videoPause").click(function(){ video.pause(); }); //音量を上げる $(".volumeUp").click(function(){ vol = video.volume + 0.1; if(vol > 1){ vol = 1; } video.volume = vol; } }); //音量を下げる $(".volumeDown").click(function(){ video.volume = video.volume - 0.1; if(vol < 0){ vol = 0; } video.volume = vol; }); //ミュート $(".volumeMute").click(function(){ video.muted = video.muted ? false : true; }); //再生位置を表示 function nowTime(){ $(".currentTime span").text(video.currentTime); }; //動画の長さを表示 $(".videoTime span").text(video.duration); //再生が完了したら function endMovie(){ alert("動画が終わりました！"); }; //はじめから再生 $(".restart").click(function(){ video.currentTime = 0; }); }); |
となります。
操作自体はそこまで難しくはないかもしれません！
他にも操作するイベントはたくさんあります。
いろんなカスタマイズができ、オリジナルのプレーヤーも作成できそうですね！
今回は基本的なものしか使用しなかったので、以上となります。
ちなみに、
firefoxで、ogv形式が再生されませんでした。。。
webm形式で見ることができました。(firefoxのverは18です)
ただ、サーバーによっては、htaccessを設置しないといけないようです。
以下を記載してアップしてください。
|
1 2 3 4 5 | AddType video/ogg .ogg .ogv AddType audio/ogg .ogg AddType application/ogg .ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm |
googleで探すと、これでogv形式もみれるはずなんですが、見れませんでした・・・
Author Profile
スターフィールド編集部
SHARE
