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でHTMLタグを置換する
jQueryでHTMLタグを置換する

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

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

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

【jQuery】フォームに条件分岐(conditional logic)を設定する
【jQuery】フォームに条件分岐(conditional logic)を設定する

例えばアンケートフォーム等で ここに来た目的は? 観光仕事その他 という設問があって、「その他」を選択すると、その下に新たに その他を選んだ方はこちらに目的をご記入下さい というテキストフォームが追加される、というのを作…

コメントを残す

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

*(必須)

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