SublimeVideoでMP4, WebMを字幕付き配信 (Xsrv)

再生コントロールの[CC]で「Japanese」を有効にして視聴して下さい。
＊但し、スマートフォンはChrome, Opera(14.0)以外は字幕の表示不可。

にスイッチされます。

＊但し、スマートフォンはChrome, Opera(14.0)以外はHDへ変更不可。

＝SublimeVideoの設定と配信方法＝

SublimeVideoを利用するには、他のHTML5 Video Player（HTML5ビデオプレイヤーツール)とは異なり、先ずは本家サイトにアクセスして右上の [SIGN UP]ボタンからEmailとPasswodを入力後、自分の配信サイトを登録してHOSTNAME（8文字から成るID)を取得する必要がある。
即ち、多くのHTML5 Video Playerは配信用プレイヤーツールをダウンロードして自分のサイトにアップする方式なのだが、 SublimeVideoは認証を受けたサイトでのみ配信用プレイヤーの利用が可能となると云うややこしい配信方式なのだ。
残念ながら、専用のグローバルIPアドレスを持たない自宅サーバは登録出来ない ┓(´_`)┏
・・・しかし、動画の配信元としての利用は可能だ。
登録時のSetup assistantで、

(1) 配信するサイトを登録
(2) 利用するアドオンを選択（No SublimeVideo logoとAuto embedは有料）
(3) デフォルトのプレーヤーの基本的デザインを設定（ここではスキンの変更は不可）
(4) 公開予定のビデオの指定（素材のパス、大きさ、Autoresizeの可否等。ここで指定する必要はなく、後にHTML編集時に指定すればよい）
(5) Summaryで、loader code in the headerの内容をメモしておく事！！
<script type="text/javascript" src="//cdn.sublimevideo.net/js/xxxxxxxx.js"></script>
（xxxxxxxxは、登録して取得したサイトのHOSTNAME)を <head>タッグ内に記述しないと作動しないので注意。

本家の Documentation> Subtitles コーナーのAdding subtitles to your videoに準じて（こちらを参照)、HTML5<!DOCTYPE HTML>でコードを記述した。
--設定TIPS--
Documentation＞Troubleshootingの「Videos... in Internet Explorer 9」で発見
⇒<head>タッグ内に上記(5)を記述する必要があったのだ
・・・登録時のSetup assistant(5)に記載があったのだが、見逃したために苦労した (-_-;)

配信用動画素材は、H.264/MP4とVP8/WebM 動画（解像度640x360, 500Kbps)を指定した（本ページとは別の未登録のサイトに所属していても再生可能)。

字幕の用意
WebVTT字幕ファイル（文字コードはUTF-8)を下記の如く用意した。但し、本ページとは別のサイトに所属していると作動しないので注意。

＝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
みんな逃げて

HD Switchingの設定
本家の Documentation>HD switching コーナーのUniversal HD switching (MP4 and WebM)に準じて（こちらを参照)、HTMLコードを記述した。
⇒「SublimeVideoでHD Switching試験：サーバーで相違」を参照。

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

Windows
・Windows 7のIExplorer 9, Chrome(24.0), Safari(5.1.7)及び Windows 8のIExplorer10メトロ版は、MP4をHTML5 ビデオとして字幕付きで再生。
・Windows 7のFirefox(20.0), Opera(12.12)は、WebMをHTML5 ビデオとして字幕付きで再生。
・Windows 7, 8用Firefox(21.0)は、H.264/MP4にも対応した＼(^o^)／・・・Mac版やVista用Firefox(21.0)は、まだH.264/MP4に未対応。

スマートフォン
・Android（4.0.4)の標準ブラウザは MP4をHTML5 ビデオとして、Firefox(21.0)は WebMをHTML5 ビデオとして再生。但し、字幕の表示は出来ない。
・Chrome(18.0) は、MP4をHTML5 ビデオとして字幕付きで再生可能だ。
・Opera Mobile(12.1.4)は何故か再生すら出来なかったが、Opera(14.0)ではMP4をHTML5 ビデオとして字幕付きで再生可能となった。
・iPhone(iOS 6.0)のSafariは、Quicktimeで全画面表示で再生され、字幕表示不可。

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

Windows：XPの IExplorer 8は、Flash Player10.0以降インストール環境では MP4を字幕付きで再生可能。

＊MP4のみで配信したFlashフォールバック試験は、こちらのページを参照。
3) HD Switching

字幕の表示されないAndroid（4.0.4)の標準ブラウザ, Firefox(21.0)及び iPhone(iOS 6.0)のSafariは、HD Switchingボタンも表示されない。
⇒「SublimeVideoでHD Switching試験：サーバーで相違」を参照。

4) 他のHTML5 Video Playerとの比較は、

⇒「SublimeVideoを利用したH.264ビデオの配信」を参照。

プレイリスト表示の配置方法は、

⇒こちらの「SublimeVideoでプレイリスト表示の設定」に提示。

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

SublimeVideoでMP4, WebMを字幕付き配信(Xsrv)