なかなかユニークだったのでメモがてら。
HTML5で実装する動画コンテンツに字幕
を加える、というjsライブラリです。思いつき
ませんでしたけど、こう言うことも出来てし
まうんですね・・・HTML5ってやっぱり凄い
かも・・（今さらですけどｗ
なかなか面白い発想ではないですかね。動画そのものにいれるのが一般的ですけど、簡単なものでいいならこの方法も有りかなと。
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"
}こんな感じで時間とその時に表示するテキストを指示します。次のセクションまではそのメッセージが表示されたままになります。
コードもかなり軽量ですよ。以下よりどうぞ。