JW Player 6の使い方(「HTML5 ビデオ配信」コーナーの 該当セクションを参照)
「JW Player 6の使い方と字幕付き配信試験」へ
「HTML5&Flashビデオをプレイリスト表示」へ
「スキップ再生の可否:IEは配信方法で差異」へ
「各種変換ソフトで作成したMP4ビデオへの対応」へ

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

JW Player 6の使い方と字幕付き配信試験 (from Xsev)
 
=スマフォは横画面表示専用ページ
(2013.01.30作成, 13.02.11更新)
JW Player 6は、優秀なFlashフォールバック対応HTML5ビデオ配信プレイヤー
再生コントロールの[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のムービー計画へ > ムービー鑑賞導入コーナーへ |