Video.jsでHLS再生しているプレーヤーを制御しましょう

Code 参照数: 8718

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するんだなってところを理解して、完成。

よくわかっていませんが、動いているので良しとしました。

DEMOページはこちらから

印刷  

Related Articles