cuepoint.jsの代わりにvideo.jsを使う

cuepoint.jsの代わりにvideo.jsを使う



cuepoint.orgが相変わらず落たままで使用出来ないので他のライブラリを使うことにしました。

この辺りで一番有名どころは

jPlayer : HTML5 Audio & Video for jQuery
参考
jPlayer : HTML5 Audio & Video for jQuery

The CSS styleable jQuery media player plugin with HTML5 support!

jPlayer : HTML5 Audio & Video for jQuery


なのだけど、多機能過ぎて設定が面倒。

そこで選んだのがこちらのVideo.js。

html5の記述コードに少し足す程度なので導入が簡単。

また、今回は動画にチャプターリストを作る必要があったのでその実装はこちらを参考に。
http://jsbin.com/oduvug/16/edit

<script>
  $(function(){      
  var videoPlayer = videojs('my_video_1');      
    videoPlayer.ready(function(){
      $('#chapter1').click(function(){
        videoPlayer.currentTime(10).play();   
      });  
      $('#chapter2').click(function(){
        videoPlayer.currentTime(20).play();   
      });  
      $('#chapter3').click(function(){
        videoPlayer.currentTime(30).play();   
      });               
    });
  });
</script>
今日はここまで
cuepoint.jsの代わりにvideo.jsを使う

cuepoint.jsの代わりにvideo.jsを使う


開発

cuepoint.orgが相変わらず落たままで使用出来ないので他のライブラリを使うことにしました。 この辺りで一番有名どころは http://jplayer.org/ なのだけど、多機能過ぎて設定が面倒。 そこで選んだの…


関連する記事



こちらはいかが?


jQueryでExcel書き出し
jQueryでExcel書き出し

http://jquerybyexample.blogspot.com/2012/10/export-table-data-to-excel-using-jquery.html WordPressで作成したHTMLテーブ…

jQueryでHTMLタグを置換する
jQueryでHTMLタグを置換する

例として、ボタンをクリックしてulタグをolタグに置換しています。 See the Pen クリックしてタグを置換する by kosuke agusa (@aguko) on CodePen. でも、このままだとidやク…

FlexsliderのDestroy処理
FlexsliderのDestroy処理

http://flexslider.woothemes.com/ Flexsliderでスライダー処理を設定した後、やっぱりやめよう、という時にスライダーの設定を無効化(Destroy)したい。 そんな時には・・・ $(…

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*(必須)

*(必須・表示されません)