HTML5 Video Player:HTML5ビデオプレイヤー

HTML5 Video Player:HTML5ビデオプレイヤー

スマホは横画面表示専用ページ
(2013.05.25作成 )
=JW Player 6は優秀だが、スマートフォンではソフトサブの表示は不可=
各種無料のHTML5 Video Player(HTML5ビデオ配信用プレイヤーツール)のなかで(「HTML5 Video Player Comparison」を参照)、Flashフォールバックとソフトサブ字幕表示 ± プレイリスト表示 機能を搭載し、設定が比較的簡単な LeanBack Player 0.7.2, MediaElements.js 2.1.0, JW Player 6, Video.js 4, Flowplayer 5.4とSublimeVideoを試用して、その表示機能について各種ブラウザで検証し比較したこちらも参照)
HTML5 Video Playerの比較:成績は問題点を中心に表示
Flash fallback以外の検証は「HTML5 ビデオとHTML5 オーディオの配信」で試験
 
 
LeanBack Player
0.7.2
Media
Elements.js
2.1.0
JW Player
6
Video.js
4
Flow
player
5.4
Sublime
Video
入手先

登録方式
JS Library
jQ
jQ
CMS Plugin
WP
WP,Drupal
WP,Drupal
Word Press
Word Press
ツールの設定方法
このページ
を参照
このページ
を参照
このページ
を参照
このページ
を参照
このページ
を参照
使用した動画素材
(Flash fallbackは MP4/H.264のみ)
MP4/H.264,
WebM/VP8,
OGG/Theora
MP4/H.264,
WebM/VP8,
OGG/Theora
MP4/H.264,
WebM/VP8
MP4/H.264,
WebM/VP8
MP4/H.264,
(WebM/VP8)
MP4/H.264,
(WebM/VP8)
Flash fallback*1
Firefox(20)
Opera(12.15)
IExplorer 8
.[Android対応*3]
ここで試験
(字幕×)
×
(字幕×)
[ × ]
ここで試験
*2
*2
*2
[ × ]
ここで試験



[ × ]
ここで試験


(素材×)
[ ]
ここで試験



[ ]
ここで試験



[ × ]
ソフトサブの表示
今回使用した字幕
[Androidでの表示]

SRT字幕
[ × ]

SRT字幕
[ × ]

SRT字幕
[ × ]

VTT字幕
[*4]

VTT字幕
[ *4]

VTT字幕
[*4]
プレイリストの表示
[スマホでの表示]

[ × ]
未搭載

[ ]
未搭載

[ ]

[ ]
Windows
・HTML5ブラウザ

IE10はHTTPD自宅サーバでは再生不可!
IE9はプレイリスト作動しない!*5

IE10はHTTPD自宅サーバでは再生不可!

IE10はHTTPDサーバではスキップ再生不可

IE10はHTTPDサーバではスキップ再生不可

IE10はHTTPD自宅サーバでは再生不可!
IE9はプレイリスト作動しない!*5

(自宅サーバではそもそも登録不可)
Chrome, Operaもスキップ再生不可
・IExplorer 8
:Flashで再生され
るとスキップ出
来ない
スキップ再生不可。
プレイリスト表示不可!
スキップ再生不可
スキップ再生不可。
プレイリストの表示可能だ
スキップ再生不可
スキップ再生不可。
プレイリストの表示可能だ
スキップ再生不可。
プレイリストの表示可能だ
スマートフォン
・Android 4

字幕表示不可。
プレイリスト表示不可!

字幕表示不可。
Firefoxでは再生出来ない!(v1.1.7なら再生可能)

字幕表示不可(VTT字幕でもダメ)
プレイリス表示問題無し

字幕表示不可

字幕の表示が可能だが
Opera12では不具合。
title属性の表示不可

字幕表示はOpera(14), Chromeのみ可能。
Opera12は再生すら出来ない。
title属性の表示不可
・iPhone 6の
Safari
字幕表示不可。
プレイリスト表示不可!
字幕表示不可
字幕表示不可。
プレイリス表示問題無し
字幕表示不可
字幕表示不可。
title属性の表示不可
字幕表示不可。
title属性の表示不可。
スキップ再生不可
 
=備考=
Flash fallbak(Flashフォールバック)とは、HTML5 ビデオ配信用プレイヤーではディバイスがHTML5 ビデオに対応しているかどうかを自動判定して、非対応のブラウザならば Flashが利用される仕組みを云う。
 
*1)
MP4/H.264動画のみを配信して、MediaElement.js以外は Flash Player 11.7インストール環境で再生試験をした。
*2)
MediaElement.jsはFlashのみならずSilverlightにも対応しているが(こちらを参照)・・・
・Windows7のFirefox(20), Opera(12.15):Flash Player未インストール環境でも、Silverlightで字幕付き再生可能 \(^.^)/
・WindowsXPの IExplorer 8:Flashビデオとして字幕付きで再生可能だが、Silverlightでは再生不可。従って、Flash Player未インストール環境では再生出来ない。
*3)
Flash Player 11.1インストール環境のAndroid版Firefox(21.0)で試験した。
 
*4)
スマートフォンの再生コントロールバーは、一般にはブラウザ固有のもの(SafariはQuickTime)が利用され、ソフトサブ字幕を表示出来ない事が多いが・・・
Flowplayer 5.4では全てのブラウザで、Video.js 4はFirefox(18.0)で、SublimeVideoはOpera(14.0), Chrome(18.0) で表示が可能だ。
*5)
Windows VistaのIExplorer 9は、LeanBack Player 0.7.2ではWindows7と同様にプレイリストが作動しないが、Flowplayer 5.4ではトラブル無し。
 
 
=検証した主たる環境=
 
 
PC: Windows 7 Professional (SP1) 64 ビット
 
 
CATV回線、コレガルータBAR EX使用
実測上り転送速度: 4Mbps前後、実測下り速度: 12Mbps前後
IExplorer10は VMware PlayerPlayer上のWindows 8仮想環境で、IExplorer 8は Windows XP モード上で実行した。
 
Android:AQUOS PHONE SH-01D, Android OS 4.0.4
 
 
イー・モバイルPocket WiFi(GP02)
実測上り転送速度: 4Mbps前後、実測下り転送速度: 7Mbps前後、
 
なお、iPhone 6のSafariは、
 
 
Xcode 4.5を導入したMac OS 10.7上の iOS 6.0シミュレータの iPhone(Retina)で実行した。
 
各ブラウザの一般的挙動:MP4/H.264, WebM/VP8の順で準備した場合
 
■HTML5 ビデオ対応ブラウザ
 
Windows
・Windows 7のIExplorer 9, Chrome(24.0), Safari(5.1.7)及び Windows 8のIExplorer10メトロ版は、MP4をHTML5 ビデオとして再生。
なお、Windows版Safariは シークバーでスキップ再生不可
・Windows 7のFirefox(20.0), Opera(12.15)は、WebMをHTML5 ビデオとして再生。
スマートフォン
・Android(4.0.4)の標準ブラウザ, Chrome(26.0), Opera Mobile(12.1.4)は、MP4をHTML5 ビデオとして再生。
・Android版Firefox(21.0)は、WebMをHTML5 ビデオとして再生。
・ iPhone(iOS 6.0)のSafariは、MP4をHTML5 ビデオとして再生。
 
■HTML5 ビデオ未対応のFlash対応ブラウザ
 
 
Windows XPの IExplorer 8は、Flash Player10.0以降インストール環境では MP4をFlashビデオとして再生。但し、シークバーでスキップ再生不可
   
=結果及び考察=
 
無料のHTML5ビデオ配信プレイヤーは一長一短があり、完全なツールは未だ提供されていないようだ。
1) WonowsXPのIExplorer 8でFlashフォールバック可能なツールは、LeanBack Player 0.7.2以外は他のPCブラウザにも対応していた。
なお、MediaElement.jsは Silverlightへも対応しているが、ブラウザによっては不可解な挙動を示した。
2) Windows7のIExplorer 9は、LeanBack PlayerとFlowplayer 5.4ではプレイリスト表示に不具合があった。
3) IExplorer10は、AN HTTPDで構築した自宅サーバからの配信では不都合があった(Apacheで構築した場合、不具合は発生しない)。
4) スマートフォンのAndroidでFlashフォールバックとソフトサブ字幕表示が完全に可能なツールは、Flowplayer 5.4のみだった(Video.js 4もFlashフォールバック可能だが、字幕表示はFirefoxのみ可能)。
5) スマートフォンでプレイリスト表示が可能なのは、JW Player 6とFlowplayer 5.4とSublimeVideoだが、JW Player 6の方が筆者が利用する目的では表現能力に優れていた。しかし、
6) JW Player 6を使用してMP4動画のみで配信すると、Android版Firefoxでは再生出来ない。スマートフォンではソフトサブの表示が出来ないと云う Flowplayer 5.4では可能な不都合がある(「JW Player 6の使い方と字幕付き配信試験」を参照)。
 
<蛇足>Projekktor 1.2.29のPlaylists機能について
 
プレイリスト表示が可能かと期待して検討した。本家の「Using Playlists」を参考にコード化してみたが成功せず、「JSON playlist導入方式」では配信動画の連続再生とコントロールバーで 次の動画/前の動画への切り替えが可能なだけで、プレイリスト画像を表示させる事は出来ない。