Video.js 4でMP4, WebMを字幕付き配信(Xserver)

再生コントロールの[CC]で「Japanese」を有効にして視聴して下さい。
＊但し、スマートフォンではソフトサブ表示出来ません。

＝Video.js 4の設定方法＝

Video.js 4は、こちらから入手（今回は、v.4.0.2を使用)した。
エンジンとして、解凍した四つのファイル（video.dev.js, video.js, video-js.css, video-js.swf) とfontフォルダを、今回はスキンの変更などのカスタマイズはせずにそのまま同梱してアップした。
1) HTMLの記述
配信用動画とポスター画像を用意して、
ソフトに付属の demo.htmlを参考に下記の如く、パスを通す編集のみをした。

＝HTML記述の内容＝

<!doctype html>
<head>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
_V_.options.flash.swf = "video-js.swf";
</script>

<body>
<video id="my-video1" class="video-js vjs-default-skin" controls preload="auto" width="560" height="315"
poster="http://kakonacl.xsrv.jp/html5_videos/videojs/chicken_skin.jpg"
data-setup="{}"> <source src="http://kakonacl.xsrv.jp/jwplayer6/chicken.mp4" type='video/mp4' />
<source src="http://kakonacl.xsrv.jp/jwplayer6/chicken.webm" type='video/webm' />
<track kind="captions" src="chicken.captions_UTF8.vtt" srclang="ja" label="Japanese" />
</video>
</body>
</html>

2) 字幕の用意
WebVTT字幕ファイルは、ソフトに付属のdemo.captions.vttを編集して文字コードをUTF-8へ変換して使用した（そのまま保存すると文字化けしてしまう)。 video-js.cssを編集すれば文字の大きさ・色の変更は可能だが、今回はデフォルトのまま使用した。

＝WebVTT字幕ファイルの内容＝

WEBVTT

00:00,890 --> 00:03,400
みんな　大変だ！
早く逃げろ

00:03,910 --> 00:06,510
SOS！　非常事態だ！

00:06,730 --> 00:08,980
危険レベル最大！非難せよ

00:09,480 --> 00:10,500
みんな危険だ

00:12,710 --> 00:17,310
＝SRT字幕の表示テスト＝

00:17,960 --> 00:19,630
急いで逃げろ！

00:21,730 --> 00:23,760
早くどこかへ！

00:25,780 --> 00:28,390
非常事態だ！

00:31,010 --> 00:51,610
＝SRT字幕の表示テスト＝

00:54,620 --> 00:56,500
みんな逃げて

＝成績＝
1) HTML5 ビデオ対応ブラウザ

Windows
・Windows 7のIExplorer 9, Chrome(24.0), Safari(5.1.7)及び Windows 8のIExplorer10メトロ版は、MP4をHTML5 ビデオとして再生。字幕表示可能。
・Windows 7のFirefox(18.0), Opera(12.12)は、WebMをHTML5 ビデオとして再生。字幕表示可能。

スマートフォン
・Android（4.0.4)の標準ブラウザ, Chrome(18.0), Opera Mobile(12.1.4)及びiPhone(iOS 6.0)のSafariは、MP4をHTML5 ビデオとして再生。
・Android版Firefox(18.0)は、WebMをHTML5 ビデオとして再生。
なお、スマートフォンの再生コントロールバーは、一般にはブラウザ固有のもの（SafariはQuickTime)が利用されソフトサブの表示は出来ないが、Firefoxでは表示可能だ。

2) HTML5 ビデオ未対応のFlash対応ブラウザ

Windows：XPの IExplorer 8は、Flash Player10.0以降インストール環境では MP4をFlashビデオとして再生可能だが、コントロールバー素材の表示が上手く描画出来ない。字幕表示可能。

JW Player 6, Flowplayer 5.4等HTML5ビデオ配信用プレイヤーとの比較は、
　⇒「HTML5 Video Player：HTML5ビデオプレイヤーの比較」を参照。

| Kenのムービー計画へ > ムービー鑑賞導入コーナーへ |

Video.js 4 でMP4, WebMを字幕付き配信(Xserver)