• かちびと.net

    HTML5で実装する動画コンテンツに字幕を付けるライブラリ・Cuepoint JSのご紹介。なかなか需要がありそうだったのでメモ。字幕をつけることが出来ますよ。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

HTML5で実装する動画コンテンツに字幕を付けるライブラリ・Cuepoint JS

スポンサーリンク

なかなかユニークだったのでメモがてら。
HTML5で実装する動画コンテンツに字幕
を加える、というjsライブラリです。思いつき
ませんでしたけど、こう言うことも出来てし
まうんですね・・・HTML5ってやっぱり凄い
かも・・(今さらですけどw

なかなか面白い発想ではないですかね。動画そのものにいれるのが一般的ですけど、簡単なものでいいならこの方法も有りかなと。

Cuepoint JS


上部にHTMLでキャプションが入っています。再生すると、動画が進み、場面に応じてテキストが分かります。


時間がたつと別のメッセージが表示されます。

キャプションの埋め方

$(document).ready(function(){
//Slides object with a time (integer) and a html string
var slides = {
0: "This is the first subtitle. You can put html in here if you like",
4: "A fluffy thing eating some grass.",
12: "Oh look it's a castle on a hill. Nice",
23: "Some horses",
34: "Wow look at those woolly sheep eating grass.",
40: "For more information on this plugin visit github/owainlewis or email owain@owainlewis.com",
50: "Cuepoint.js is an open source plugin for adding subtitles and cue-points to your HTML5 video"
}

こんな感じで時間とその時に表示するテキストを指示します。次のセクションまではそのメッセージが表示されたままになります。

コードもかなり軽量ですよ。以下よりどうぞ。

Cuepoint JS

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services