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するんだなってところを理解して、完成。
よくわかっていませんが、動いているので良しとしました。