JW Player 6の使い方と字幕付き配信試験

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

＝概要＝
JW Player 6はHTML5 ビデオ及び Flashビデオ配信用パッケージで、初期モードではHTML5ビデオに対応しているかどうかを自動判定して、非対応のブラウザならば Flashビデオも利用される仕組みになっている（これを「Flashフォールバック機能搭載HTML5ビデオプレイヤー」と称す ⇒「HTML5 Video Player：HTML5ビデオプレイヤーの比較」を参照)。
但し、JW Player 6は Androidでは Flashをサポートしないに変更されたので、スマートフォンではHTML5 ビデオのみの配信プレイヤーとなってしまった。
＜歴史＞JW FLV Media Player 4は Flashビデオのみの配信用プレイヤーだったが、JW Player 5になって HTML5ビデオにも対応したFlashビデオ優先の配信用プレイヤーとなり、JW Player 6では HTML5ビデオ優先の配信用プレイヤーに変更された（「Migrating from JW5 to JW6」を参照)。
＝入手＝
JW Player 6をここから入手（今回は jwplayer-free-6-1-2972_zipを、 20013.02.11からは jwplayer-3115.zipのJW Player 6.2へ更新して使用)。
「JW Player Key」を取得するにはアドレス登録が必要（フリー版では「JW Analytics」なるものを利用する場合にのみ必要)。

＝使用方法＝
配信用動画にH.264圧縮MP4動画を、字幕にSubtitle Workshop（こちらを参照)で作成したSRT形式のファイル(文字コードUTF-8) を用意した（WebVTT形式でも一部検証したが、結果は同じだった)。
本家サイトの「Setup Wizard」を使えば簡単で、[file]と [image]欄にURLを記述すると自動でHTML記述文を生成してくれるが（付属の README.htmlも参照)・・・

今回は字幕付きで配信するので、本家サポートコーナーの「Adding Video Captions」を参考に記述したが、動画とイメージ画像は外部サーバに配置してもよいが、字幕ファイルは外部に配置すると機能しないので注意。
エンジンとして、解凍した三つのファイル（jwplayer.js, jwplayer.html5.js, jwplayer.flash.swf)を「jwplayer」フォルダに同梱してアップし、jwplayer.jsにパスを通す。

＝HTML記述の内容＝

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jwplayer/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="pCIy9GX0......=="</script>
<title>jwplayer6_subtitle</title>
</head>
<body style="margin:0; padding:0;">
<div id='my-video1'></div>
<script type='text/javascript'>
jwplayer('my-video1').setup({
captions: {
back: false,
color: 'cc0000',
fontsize: 20
},
playlist: [{
captions: [{
file: "subtitle/srt_example_ja.srt",
label: "Captions"
}],
file: "http://kakonacl.xsrv.jp/jwplayer6/chicken.mp4",
image: "chicken.jpg"
}],
height: 338,
width: 600
});
</script>
</body>
</html>

＜TIPS＞この記述を本文中に埋め込む作業に苦労した (-_-;)
div id='my-video'でのscriptを本文中に挿入すると、領域からはみ出て表示されてしまう（<div>ブロックのsheet内に埋め込んでみたが不完全)。
そこで、インラインフレーム内表示としてみたが、それではFullscreen表示出来ない。
→ →結局、my-videoを my-video1... と通し番号にしたら解決したヽ(^o^;)ノ

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

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

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

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

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

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

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

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

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

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

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

なお、筆者が契約しているレンタルサーバーXserverは、IExplorerによる HTML5/ H.264ビデオの再生には .htaccessでMIME設定（AddType video/mp4 .mp4)が必要だった(「各種プロバイダのHTML5 ビデオへの対応状況」を参照)。

＝成績＝
1) HTML5のH.264/MP4ビデオ対応ブラウザ

Windows
・Windows 8のIExplorer10デスクトップ版とWindows 7のIExplorer 9は、XserverではMIME設定すれば再生可能となった。
・Windows 8のIExplorer10メトロ版も、XserverではMIME設定すれば再生可能。
・Windows 7のChrome(24.0), Safari(5.1.7)は、MIME設定しなくても再生可能。

スマートフォン
・Android（4.0.4、AQUOS PHONE SH-01D)の標準ブラウザ, Chrome(18.0), Opera Mobile(12.1.4)は、MIME設定しなくても再生可能。但し、字幕の表示は出来ない。
・iPhone(iOS 6.0)のSafariは、XserverではMIME設定すれば再生可能となるが、字幕表示は不可。
なお、スマートフォンの再生コントロールバーはブラウザ固有のもの（SafariはQuickTime)が利用される。

2) HTML5/H.264未対応のFlash対応ブラウザ

Windows：Windows 7のFirefox(18.0), Opera(12.12) 及び Windows XPの IExplorer 8
・Flash Player10.0以降インストール環境では、Xserver配信でも MIME設定しなくとも再生可能。
・Flash Player未インストール環境では、Firefoxは QuickTime Pluginで代替再生可能になる（但し、字幕表示は不可)。Operaは再生出来ないが、下記の＜対策＞をすれば WebMでHTML5 ビデオとして再生可能となる。IExplorer 8は再生不可。

スマートフォン：Android（4.0.4、AQUOS PHONE SH-01D)の Firefox(18.0)
バージョン6は AndroidではFlashのサポートを中止してしまったので、Firefoxは JW Player 5.4ではH.264/MP4をFlashで再生可能だったが、JW Player 6では再生出来なくなってしまった ┓(´_`)┏

そこで、

＜対策＞HTML5 ビデオにWebM（VP8/Vorbis)も追加して配信（こちらを参照)

file: "http://kakonacl.xsrv.jp/jwplayer6/chicken.mp4"

↓

sources: [{
file: "http://kakonacl.xsrv.jp/jwplayer6/chicken.mp4"
},{
file: "http://kakonacl.xsrv.jp/jwplayer6/chicken.webm"
}]

に変更・記述して配信した（なお、Firefoxによる HTML5/ WebMビデオの再生には自宅サーバでも MIME設定が必要)。

⇒＜補足1＞に提示しました。

3) 字幕のソフトサブ表示

JW Player 6では今回使用したSRT字幕は iOSやAndroidには未対応の為、スマートフォンでは表示出来なかった（WebVTT形式でも一部検証したが、ダメだった)。

4) Fullscreen（全画面)表示

a)Flashビデオとして再生される場合は、いずれのPCブラウザでも全画面表示が可能。
b)HTML5ビデオとして再生される場合は、
・Windows 7のFirefox, Chrome, Safari 及び Windows 8のIExplorer10メトロ版は、全画面表示可能。一方、
・Windows 7のIExplorer 9とWindows 8のIExplorer10デスクトップ版は、ブラウザ内でしか拡大させらない（但し、ブラウザの「全画面表示」機能を使用すれば不便はない)。
＜備考＞HTML5の<!DOCTYPE HTML>宣言せずに配信すると、IExplorer 9ではFlashビデオとして再生されるようになり全画面表示可能となるが、IExplorer10はそれでもHTML5ビデオとして再生出来る為全画面で表示出来ない ⇒「 ...非HTML5仕様で配信」を参照。
・Windows 7のOperaも、全画面表示出来ずブラウザ内拡大のみとなってしまう(但し、ブラウザの「フルスクリーン表示」機能を使用すればよい)。
＝Opera 12.04の不可解な挙動＝
Opera 12.04は、マシーンの条件によっては MP4＋WebMで配信してもFlashビデオとして再生されてしまう場合がある ?(゜_。)?・・その為にHTML5ビデオ再生でも全画面表示が可能だと、間違ってしまう事が起こる。

5) シークバーでスキップ再生

HTML5 ビデオとして再生される場合は、Windows版Safari以外はコントロールバーのシークバーでスキップ再生が可能だが、IExplorerは配信方法によってはスキップ再生出来ない。一方、Flashビデオとして再生される場合はスキップ再生不可。
⇒「JW Player 6でスキップ再生の可否：IEは配信方法で差異」を参照。

6) JW Player 6の各種変換ソフトで作成したMP4ビデオへの対応 ⇒こちらを参照。

7) 自動再生させるには、autostart: 'true'　を追記すればよいが、スマートフォンでは自動再生出来ない ⇒ こちらのページで試験。

＜補足1＞スキンの変更とWebMの追加

コントロールバーのスキンをカスタマイズする事が可能となっており、サポートコーナーの「Changing Skin Elements」から借用した緑色のスキン jw6-five-green.xmlで検討した。
＊Browsing/AddOns: Skins のJW5用サンプルの中で数個の気に入ったスキンは作動しなかったので、それ以上の深追いは止めた。
＜方法＞
・スキンの入手先 http://www.longtailvideo.com/sites/default/files/jw6-five-green.xml
・<body>の jwplayer('my-video').setup({ の最後に、例えば skin: "jw6-five-green.xml" と追記して配信する。
・スキンXMLファイルは、字幕ファイルと同様に外部のサーバに配置すると機能しないので注意（動画、イメージ画像は外部サーバに配置してもよい)。

＜成績＞SRT字幕付きやプレイリスト表示の場合でも問題なく、コントロールバーはカスタマイズされたスキンで表示された。

但し、スマートフォンではブラウザ固有のものが使用される。

＜TIPS＞AndroidのFirefoxは、再生開始時にバッファリングで停まってしまう事が多い →タップして停止させた後に、再度タップして再開すれば上手く再生を開始出来ます。

追記(2013.02.11)
＜補足2＞YouTube Videoの埋め込み

YouTube動画のURLにも対応しているので、サポートコーナーの「Basic YouTube stream」を参考に、筆者がFull HDのMPEG2で投稿して公開した字幕付き動画（YouTubeに投稿した...を参照)を使用してみた。
＝方法＝
・file: のみを YouTubeで公開先のURLに変更すればよい。今回は、
file: "http://www.youtube.com/watch?v=tvXXyCdHcX8&feature=youtu.be" で配信。
なお、「Playing a YouTube Video」のように 'flashplayer': 'jwplayer/player.swf',　'id': 'playerID',　'controlbar': 'bottom' を記述しなくても結果は同じだった。
・コントロールバーのスキンは、白色の jw6-five_0.xmlを用いた（入手先 http://www.longtailvideo.com/sites/default/files/jw6-five_0.xml)。

＝成績＝

1) 各種画質(1080, 720, large, medium, small)で受信可能となる。
2) Windows
・Flash Player10.0以降インストール環境では、Flashビデオとして再生される。
・Flash未対応のWindows 8のIExplorer10メトロ版及びFlash Player未インストール環境のChrome（自前のFlashを搭載)以外のブラウザは、再生出来ない（但し、Opera以外のブラウザは YouTubeサイトでは再生可能) ┓(´_`)┏
.・YouTubeで設定した字幕を表示出来ないので、当配信サイトで用意する必要があった。
.・イメージ画像は、当サイトで設定しなければ YouTubeのそれが表示される。
3) Android（4.0.4、AQUOS PHONE SH-01D)では、当サイトのスキンは利用されず YouTubeそのものが埋め込まれるようだが、こちらの成績と一致しない ?(゜_。)?
.・標準ブラウザ, Opera Mobile(12.1.4)は、字幕付きで再生可能。
.・Firefox(18.0)は、再生不可（但し、YouTubeサイトでは字幕付きで再生可能)。
.・Chrome(18.0)は、YouTubeサイトへ自動的にリンクされて字幕付きで再生可能。

.＝各Android用ブラウザのコントロールバー形状の差異＝

	標準ブラウザ :字幕の修飾不可
	Opera Mobile :字幕の修飾をカスタマイズ可能
	Firefox ：再生不可(；；)
	Chrome :字幕の修飾不可

4) iPhone(iOS 6.0)のSafariは、QuickTimeが起動して再生される為に字幕表示不可。

iPhone
Safari
:字幕の表示不可

5) 公開・共有動画をウェブページに埋め込み可能な「Googleドライブ」や「Facebook」,「ニコニコ動画」,「FC2動画」のURLでも試してみたが、対応していなかった。

＝結果と考察＝
iframe方式でウェブに植え込む標準的な方法では、成績2)のFlash未対応・未インストールのブラウザでも HTML5ビデオとして再生可能だ（こちらの成績)。JW Playerを使う方法では YouTubeで設定した字幕を表示出来ない。又、Opera Mobileでは字幕の修飾をカスタマイズ出来るようになるが、Android版Firefoxでは再生出来なくなってしまうので、YouTube動画をJW Playerで使う事はデメリットの方が多い。

＜参考＞プレイリスト表示

JW Player 6は、複数の動画をプレイリスト表示して選択・再生する事も可能となっており、サポートコーナーの「Playlist sidebar component」を参考に提示した。
。⇒「JW Player 6でHTML5＆Flashビデオをプレイリスト表示」を参照。

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

最上段へ

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

JW Player 6の使い方と字幕付き配信試験(from Xsev)