FLINTERS Engineer's Blog

FLINTERSのエンジニアによる技術ブログ

HTML5動画に字幕が付けられる jQueryプラグイン『Cuepoint.js』を体験してみた

みなさん

こんばんわ。@kouhei328です。
f:id:septeni-original:20150722103634p:plain
今日は最近話題になっていたHTML5動画に字幕が付けられる
jQueryプラグイン『Cuepoint.js』を体験してみました!


まずは[Cuepoint JS]からサンプルコードをDL。

続いてDLしたcuepoint.jsを読み込んだらこんな感じで動画のタイムと表示したいテキストを突っ込みます↓↓

$(document).ready(function(){
  var slides = {5:"Hello World"}
  cuepoint.init(slides);
  cuepoint.play();
});


その他動画を指定した場所でスキップできたりもするようです。

サンプルを作ってみました!!
HTML5のVideo要素については[HTML5 -Video要素]を御覧ください!

サンプルはこちら

※対応ブラウザ
Firefox,Safari,opera,Google Chrome