Video.jsを使用して、HLS動画を再生している状況で、10秒早送り、10秒巻き戻し、現在の経過秒数などをjQueryを使って実装しました。
再生する動画はHLS形式で.m3u8です。
必要なライブラリ、<head> 内部で読込。
- video.js
- video-js.swf
- videojs-media-sources.js
- videojs.hls.min.js
を読み込んでいます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="http://vjs.zencdn.net/5.4.6/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.4.6/video.js"></script>
<script src="videojs-media-sources.js"></script>
<script src="videojs.hls.min.js"></script>
<script type="text/javascript">
videojs.options.flash.swf = "video-js.swf";
</script>
で、body部分です。
<video>の後に<script>を置いています。
<body>
<video id="myvideo" class="video-js" controls preload="auto" width="640" height="264"
poster="video.jpg" data-setup="{}">
<source src="http://qthttp.apple.com.edgesuite.net/1010qwoeiuryfg/sl.m3u8" type="application/x-mpegURL">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script>
videojs("myvideo").ready(function(){
var player = this;
console.log(player);
player.play();//自動再生
$("#ctime").click(function(){
//current time
var t=player.currentTime();
alert("current TIme is "+t +" seconds!");
});
$("#gtime").click(function(){
//先頭から10秒目に移動
player.currentTime(10);
});
$("#next").click(function(){
//+10秒進む
var t=player.currentTime();
player.currentTime(t+10);
});
$("#prev").click(function(){
//-10秒戻る
var t=player.currentTime();
player.currentTime(t-10);
});
});
</script>
<h3>クリックしてください↓</h3>
<p id="ctime">current time</p>
<p id="gtime">先頭から10秒目に移動</p>
<p id="next">+10秒進む</p>
<p id="prev">-10秒戻る</p>
ポイントはvideojs("myvideo").ready
最初にプレーヤー・オブジェクトをつかむことが出来なくて、困りました。
上記のコードで動いたのですが、ポイントだなと思うところが2点。
いろいろサンプルコードを見たところ、
<video>タグのあとに<script>が書かれていた。
videojs("myvideo").ready というイベントで動かす。
が意外というか、すぐに思いつくことが出来ないところでした。
var player = this;
というところも、妙に納得してしまいました。
currentTime() で、getとsetするんだなってところを理解して、完成。
よくわかっていませんが、動いているので良しとしました。
