SublimeVideoの使い方(「HTML5 ビデオ配信」コーナーの 該当セクションを参照)
「SublimeVideoを利用したH.264ビデオの配信」へ
「MP4, WebMを字幕付き配信」へ
「プレイリスト表示の設定」へ
「プレイリスト右側表示の設定」へ
「HD Switching試験:サーバーで相違」へ

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

SublimeVideoでMP4, WebMを字幕付き配信 (Xsrv)
 
スマフォは横画面表示専用ページ
(2013.06.02作成)
字幕表示とHD Switching試験:SublimeVideoを用いて、H.264/MP4, VP8/WebMをWebVTT字幕、HD Switching付きで配信
 
再生コントロールの[CC]で「Japanese」を有効にして視聴して下さい。
*但し、スマートフォンはChrome, Opera(14.0)以外は字幕の表示不可。
にスイッチされます。
*但し、スマートフォンはChrome, Opera(14.0)以外はHDへ変更不可。
   
=SublimeVideoの設定と配信方法=
1)
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>タッグ内に記述しないと作動しないので注意。
2)
本家の Documentation> Subtitles コーナーのAdding subtitles to your videoに準じて(こちらを参照)、HTML5<!DOCTYPE HTML>でコードを記述した。
--設定TIPS--
Documentation>Troubleshootingの「Videos... in Internet Explorer 9」で発見
<head>タッグ内に上記(5)を記述する必要があったのだ
・・・登録時のSetup assistant(5)に記載があったのだが、見逃したために苦労した (-_-;)
3)
配信用動画素材は、H.264/MP4とVP8/WebM 動画(解像度640x360, 500Kbps)を指定した(本ページとは別の未登録のサイトに所属していても再生可能)。
4)
字幕の用意
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
みんな逃げて

5)
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でプレイリスト表示の設定」に提示。



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