なかなかユニークだったのでメモがてら。
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" } |
こんな感じで時間とその時に表示するテキストを指示します。次のセクションまではそのメッセージが表示されたままになります。
コードもかなり軽量ですよ。以下よりどうぞ。