HTML5

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。今回のtipsは…【 <video>タグによる動画の再生、現在の再生時間や終了のタイミングの取得方法 】です。プレイボタンや停止ボタンのカスタマイズにも触れていますのでお役に立てれば幸いです。

<video>タグによる動画の設置

動画の設置方法は以下のタグから実装できます。プラウザによって再生可能な動画が異なりますので、.MP4及び.webm形式の動画を準備してください。


<video id="video" class="vd" autoplay poster="video/thumb.jpg">
<source src="video/001.m4v">
<source src="video/001.webm">
<p><img src="video/thumb.jpg"></p>
</video>

プラウザとの動画対応表
形式 IE8 IE9~ Chrome FireFox Safari Opera
MP4
webm

MP4からwebm/ogvへの変換、webm/ogvからMP4への変換は比較的簡単にできます。変換方法はコチラ

動画の現在の再生時間/終了時間/終了のタイミングの取得

これは以下のタグで実現できます。


<ul id="DETE">
<li id="end">再生中</li>
<li id="now"></li>
<li id="all"></li>
</ul>

<video id="video" class="vd" autoplay poster="video/thumb.jpg">
<source src="video/001.m4v">
<source src="video/001.webm">
<p><img src="video/thumb.jpg"></p>
</video>



function init(){
mVideo = document.getElementById("video");
mVideo.addEventListener("ended", function(){
$(‘#end’).html(‘END’);
}, true);
mVideo.addEventListener("timeupdate", function() {
var now = Math.round(mVideo.currentTime);
var all = Math.round(mVideo.duration);
$(‘#now’).html(‘現在の再生時間:’ + now + ‘s’);
$(‘#all’).html(‘合計時間:’ + all + ‘s’);
}, true);
};
$(function(){
init();
});

簡易的に解説すると…mVideo.addEventListener(“timeupdate”〜の部分で再生中かを判別しています。
動画のID.currentTime:現在の時間が取得できます。
動画のID.duration:合計時間が取得できます。
他にも色々な値が取得できますので、詳しくはコチラをご参照ください。

再生/停止ボタンの設置


<ul id="DETE">
<li id="P">Play</li>
<li id="S">Pause</li>
</ul>

<video id="video" class="vd" autoplay poster="video/thumb.jpg">
<source src="video/001.m4v">
<source src="video/001.webm">
<p><img src="video/thumb.jpg"></p>
</video>



function init(){
mVideo = document.getElementById("video");
mVideo.addEventListener("timeupdate", function() {
$(‘#P’).click(function(){mVideo.play();});
$(‘#S’).click(function(){mVideo.pause();});
}, true);
};
$(function(){
init();
});

以上になります。