ストリーミング動画の配信をカテゴリー別に分類（Real Media, QuickTime, NSVは別項)

HTML5 ビデオとHTML5 オーディオの配信

HTML5 ビデオとHTML5 オーディオの配信

（2012.12.17独立 )

＝HTML5 ビデオ＝厄介な問題点

問題点1：ウエブブラウザに合わせて複数の形式を用意する必要がある
・・・FirefoxとOperaは H.264圧縮MP4を不支持

HTML5 ビデオのストリーミング配信（字幕表示付き）

　JavaScriptでHTML5
ビデオのキャプション表示

サーバ	リンク方法
サーバ	iframe内	直接
Xserver	ここから	ここから

詳細は、「HTML5ビデオプレイヤーでHTML5...字幕表示」(こちらを参照）。
注意
1)HTML5方式で配信される動画をご覧頂くには、HTML5 ビデオ対応ブラウザが必要です。現在ご使用中のブラウザのHTML5への対応状況は、こちらのテストサイト「The HTML 5 test」のVideo欄で確認する事が可能です。
2)Firefoxはサーバが .Mac iDiskの場合には再生出来ません（こちらを参照）。
3)IExplorer 6～8でご覧頂くには、Google Chrome Frame（ここから入手）のインストールが必要です（当サイトでは視聴可能となっています）。

＜参考1＞各ブラウザの各種HTML5 ビデオ再生のフォーマット対応状況

　詳細は、「HTML5 ビデオと主要ブラウザの対応状況」を参照。

	動画形式
検証したブラウザ

MP4動画
H.264/AAC

OGG動画
Theora/Vorbis

WebM動画
VP8/Vorbis

MKV動画
H.264/Vorbis

　Internet Explorer 8

　Internet Explorer 9

○

×(+WebMIE9○)

　Opera

○ 24＜

○10.5＜

○10.6<

　Firefox

▽ 21<

○ 3.5＜

○ 4β<

　Google Chrome

○3＜

○ 4＜

○ 6<

○ 7＜

　Safari [Windows版] +QT

○3.1＜

×(+XiphQTで？)

　Safari [MacOSX版]

○3.1＜

×(+XiphQTで○)
但し10.7の
Safari 5.1：×

×(+Perianで○)
但し10.4,10.7：×

×
(+Perianで▼)

　iCab

○4＜

×(+XiphQTで○)

×(+Perianで○)
但し10.4：×

×
(+Perianで○)

＝注釈＝

＋XiphQT：QuickTime＋VorbisのQuickTimeコンポーネントの導入で再生可能。
但し、Win版とMacOSX10.7のSafari 5.1はOGGの再生が出来なくなってしまった。
＋WebMIE9（WebM for IE9）：IE9用のWebMビデオ再生プラグイン（こちらから入手）の導入で再生可能。
＋Perian：Perian 1.2.2以降を導入すれば、SafriとiCabでWebM動画の再生が可能となるはずだが・・・
＝FirefoxのH.264/MP4への対応＝
Windows 7, 8用Firefox(21.0), Vista用Firefox(22.0)は、H.264/MP4にも対応した。Mac版Firefoxは34以降に対応した＼(^o^)／
Operaは Developer 24以降 HTML5 でのH.264/MP4動画をサポートした。

追記（2017.01.07)
＝Chromeの MKV動画への対応＝

WindowsXPで旧バージョンの Google Chromeを用いて、H.264/ Vorbis圧縮 MKV動画を type='video/x-matroska'の HTML5ビデオとして配信しその再生を検証したところ、v.7.0.517.41（2010/10/19)から既に MKV動画をサポートしている事に今更ながら気付いた。但し、この事に言及している記事は見られない。なお、H.265/HEVC圧縮 MKVの場合は映像を描画出来ない（こちらに提示)。
最新の Chrome 47.0は、Windows（10)、MacOSX（10.10)及びスマホ（Android 5.0.1)いずれでも H.264圧縮 MKV動画の再生が可能だったが、
iPad mini（iOS 9.2)では、Safariと同じく未対応だった。
なお、Windows版 Maxthon Cloud Browser（4.4.8)はウルトラモードでは、MKV動画の再生が可能だった。
また、MacOSX（10.10)では Perian（1.2.3)を導入すれば、iCab（5.6.2)で再生可能となり、Safari（8.0.4)では無声だが映像描画が可能となる。

＜参考＞HTML5 video要素（Wikipedia最終更新 2015年6月24日より)

（Wikipediaの記事から引用)

ウェブブラウザ	オペレーティングシステム	最新安定版	サポートするフォーマット
ウェブブラウザ	オペレーティングシステム	最新安定版	Theora	H.264 (MP4)	VP8 (WebM)	VP9 (WebM)
Android ブラウザ	Android	4.4.4	2.3以降^[3]	3.0以降^[3]	2.3以降^[3]	非対応
Chromium	Unix系、Windows	N/A	r18297以降^[4]	手動インストール^{[注 1]}^[6]	r47759以降^[7]	r172738以降^[8]
Google Chrome	Windows, OS X, Linux 43.0.2357.130 - 2015年6月22日（2日前）（2015-06-22）^[9] Android (ARM, x86) 43.0.2357.92 - 2015年6月3日（21日前）（2015-06-03）^[10]^[11] iOS 43.0.2357.51 - 2015年6月1日（23日前）（2015-06-01）^[12]		3.0以降^[13]^[14]	3.0以降^[14]^{[注 2]}	6.0以降^[16]^[17]	29.0以降^{[注 3]}
Internet Explorer	Windows	11.0	手動インストール	9.0以降^[20]	手動インストール	非対応
	Windows Phone	11.0	非対応	9.0以降^[21]	非対応
	Windows RT	10.0	非対応	10.0^[21]	非対応
Konqueror		4.10.5 - 2013年7月2日（23か月前）（2013-07-02）	4.4以降^{[注 4]}
Mozilla Firefox	Windows 7以降	通常版 38.0.5 - 2015年6月2日（22日前）（2015-06-02）^[23] ESR ESR 38.0.1 - 2015年5月14日（41日前）（2015-05-14）^[24] ESR 31.7.0 - 2015年5月12日（43日前）（2015-05-12）^[25]	3.5以降^[26]	21.0以降^{[注 5]}	4.0以降^[29]^[30]	28.0以降^[31]^[32]
	Windows Vista			22.0以降^[33]
	Windows XP			手動インストール^[34]^{[注 6]}
	Linux			26.0以降（GStreamer利用）^{[注 7]}
	Android			17.0以降^[38]
	OS X			34.0以降^[39]
	Firefox OS			1.1以降^[40]
Opera	Android 30.0.1856.92967 - 2015年6月9日（15日前）（2015-06-09）^[41] Android (classic) 12.1.8 - 2014年11月6日（7か月前）（2014-11-06）^[42] Symbian S60 12.0.22 - 2012年6月24日（2年前）（2012-06-24）^[43] Windows Mobile 10.0 - 2010年3月16日（5年前）^[44]		非対応	11.50以降	15.0以降	16.0以降
Opera	Windows, OS X, Linux 30.0.1835.59 - 2015年6月10日（14日前）（2015-06-10）^[45]		10.50以降^[46]	24.0以降^[47]	10.60以降^[48]^[49]	非対応
Safari	iOS	OS X Yosemite 8.0.6 - 2015年5月6日（49日前）^[50] OS X Mavericks 7.1.6 - 2015年5月6日（49日前）^[50] OS X Mountain Lion 6.2.6 - 2015年5月6日（49日前）^[50]	非対応	3.1以降^[51]^[52]	非対応	非対応
Safari	OS X		手動インストール	3.1以降^[51]^[52]	手動インストール^[53]	非対応
Web		3.16.0 - 2015年3月25日（2か月前）（2015-03-25） ^[54]	2.28以降^{[注 8]}

＜参考1＞Android版Firefoxの H.264/MP4への対応
v17.0以降 H.264/MP4に対応したとあるが、 v38.0でも
・Andriod 4.0.4（AQUOS PHONE SH-01D)： MIMEに未対応。
・Andriod 4.1.2（ドコモ dtab 01)：再生出来ず往々クラッシュしてしまう。
・Andriod 4.4.2（GALAXY Tab4)：対応。自動再生可能（植え込み方式のみ）。字幕の表示、ループ再生も可能。

＜参考2＞Androidの標準ブラウザと Chromeは、Theora/OGGにも対応とあるが、Andriod 4.1.2（ドコモ dtab 01)、Andriod 4.4.2（GALAXY Tab4)はいずれも再生出来なかった（Firefox 38.0では再生可能)。

＜参考3＞iOS版 ChromeはTheora/OGG, VP8/WebMにも対応とあるが、iOS 8.2（iPad mini)の Chrome 43.0： Safariと同様に H.264/MP4以外の再生は不可だ。

＜参考4＞VP9/WebM動画への対応
・Windows7 ブラウザ： WebMに対応する Chrome（29.0以降), Firefox（28.0以降)は対応。Opera（16.0以降)も映像の描画が可能だ。
・Android 4.1.2：Firefox（29.0)のみ再生可能。
・Android 4.4.2：Chrome（43.0), Opera（30.0), Firefox（38.0)の他、標準ブラウザでも再生可能。但し、Firefoxはガクガク再生、その他では影付き描画となってしまう（こちらを参照)。
・OSX, iOSの Safari：未対応

問題点2：DivX Plus Web Player 2.1.1 導入環境におけるHTML5ビデオ表示の不具合
（詳細は、「DivX Plus Web Player 2.1...」を参照）

DivX Plus Web Player 2.1インストール環境でH.264/MP4動画を視聴すると以下の不具合が起こります・・・v.2.1.3では下記の追記(11.12.03)参照。
iframe内リンク配信の場合
Mac版SafariでMP4動画を視聴すると、DivX Plus Web Playerで再生されてしまう為、字幕表示出来ません ?(>_<、)Y
直接リンク配信の場合
IExplorer9, ChromeとMac版Safari は、DivX Plus Web Playerで再生されてしまう為、字幕表示出来ません ?(>_<、)Y

＜参考2＞DivX Plus Web PlayerのHTML5 ビデオの字幕表示への影響

	動画システム
検証したブラウザ

DivX Plus
Web Player
HTML5
<video>
(別記参照)
への対応

HTML5 ビデオの字幕表示への影響

JavaScript
でHTML5
H.264再生

LeanBack
Player101116

MediaElem
ent.js 1.1.7

iframe
内リンク

直接
リンク

iframe
内リンク

直接
リンク

iframe
内リンク

直接
リンク

　IExplorer 8

△MP4のみ

ー

DivX

Flash

DivX

Flashで再生

　IExplorer 9

○

DivX

○

◯

○

◯

　Opera 11.00

未対応

ー

○

　Firefox 3.6.12

○

ー

DivX

○

DivX

○

DivX

　Firefox 4.0b9

○

ー

DivX

×ダメ

DivX

○

DivX

　Chrome 9.0[Windows版]

○

DivX

○

DivX

○

DivX

　Chrome 9.0[MacOSX版]

○

DivX

○

DivX

○

D音声

　IE 8＋Chrome Frame

△MP4のみ

○

DivX

○

DivX

○

DivX

　Safari 5.0.3 [Win版]＋QT

未対応

○

　Safari 5.0.3 [MacOSX版]

○

DivXで再生

DivX音声のみ

　iCab 4.8

未対応

○

○/DX

○

＝注釈＝

表は、iframe内リンク配信と直接リンク配信の成績を示す。

○印：HTML5 videoとして再生、ー印：そもそも該当形式には未対応。

DivXで再生：Mac版Safari はDivX Plus Web Playerで再生されてしまう為、字幕表示出来なくなってしまう。

DivX：インラインフレーム（ifram）内でリンクさせる場合は、ラッキー！な事に、Mac版Safari以外はHTML5 videoとして再生可能だが・・・
直接リンクしている場合は、DivX Plus Web Playerで再生されてしまう為に字幕表示出来ない Y (>_<、)Y

対処方法
Opera, Win版Safari以外はアドオン/機能拡張で ”DivX Plus Web Player HTML5<video>” を無効にしてご覧下さい（OperaとWin版Safariのプラグインにはそもそもこのバージョンの機能拡張は導入されない）。
一方、IExplorer8+Chrome Frameは完全無効化出来ない（こちらを参照）。

	追記（2011.12.03）DivX Plus Web Player 2.1.3 になって、IExplorer 9 とMac版Safari 5.1はDivX Plus Web Player HTML5<video>が作動しなくなりました（こちらを参照）。最新版ではWin版Chrome(15.0)及びIE 8＋Chrome でのみ不具合が発生する（IExplorer 8とFirefox(8.01)はWeb PlayerでMP4の再生が可能となるが、字幕表示は不可）。
	なお、IExplorer 9は HTML5ビデオプレイヤーによる字幕表示において、文字修飾の陰影を表示出来ません（こちらを参照） (>_<、)

各種「Flashフォールバック対応HTML5ビデオ配信プレイヤー」

⇒「HTML5 Video Player：HTML5ビデオプレイヤーの比較」を参照

LeanBack Playerを利用したHTML5ビデオの配信

LeanBack Player 0.7.2で
HTML5 ビデオの字幕表示

サーバ	リンク方法
サーバ	iframe内	直接
Xserver	ここから	ここから

HTML5 videoは、MP4（H.264）, WebM（VP8）, OGG（Theora）の順で準備。
詳細は、「HTML5ビデオプレイヤーでHTML5...字幕表示」(こちら)を参照。
注意
・スマートフォンではソフトサブ表示出来ません。
・IExplorer10は、HTTPD利用の自宅サーバでは再生出来ません。
・DivX Plus Web Player 2.1インストール環境では、直接リンクによる配信の場合はLeanBack Player101116では、上記表の不都合がありましたが・・・LeanBackPlayer 0.7.2ではほぼ解消しました（こちらを参照）＼(^o^)／

補足：LeanBack Player 0.7.2でHTML5ビデオのプレイリスト表示

LeanBack Player 0.7.2で
ツアー”天空の楽園”
アンコール王朝を
プレイリスト表示

サーバ	直接リンク
Xserver	ここから

タイトル1～5は、MP4(H.264), OGG(Theora), WebM(VP8)の順に、
追加タイトル5は、MP4（H.264）, WebM（VP8）, OGG（Theora）の順
タイトル6～9は、WebM(VP8)のみを準備しました。
スマートフォンではプレイリスト表示出来ません。
IExplorer 9は、プレイリストからのリンクが作動しません ┓(´_`)┏

MediaElement.jsを利用したHTML5ビデオの配信

MediaElement.js 2.1.0で
HTML5 ビデオの字幕表示

サーバ	リンク方法
サーバ	iframe内	直接
Xserver	ここから	ここから

HTML5 videoは、MP4（H.264）, WebM（VP8）, OGG（Theora）の順で準備。
詳細は、「HTML5ビデオプレイヤーでHTML5...字幕表示」( こちら）を参照。
注意
・スマートフォンではソフトサブ表示出来ません。Firefox (21.0)は再生出来ません。
・IExplorer10は、HTTPD利用の自宅サーバでは再生出来ません。
・DivX Plus Web Player 2.1インストール環境では、直接リンクによる配信の場合には FirefoxとMac版SafariはMediaElement.jsが利用されず DivX Plus Web Playerが起動してしまう為、字幕表示出来ません（v.1.1.7は上記表参照）。
・・・アドオン/機能拡張で”DivX Plus Web Player HTML5<video>”を無効にしてからご覧下さい。

JW Player 6を利用したHTML5ビデオの配信

JW Player 6 で HTML5 ビデオの字幕表示 (500kbps)		Xserver　ここから
JW Player 6で "トルコ周遊ツアー旅行"をプレイリスト表示(500Kbps)		ここから入場
JW Player 6 配信試験：各種MP4変換ソフトの適応性 (550kbps)		ここから入場（from Xserver)

JW Player 6は Flash対応のHTML5 ビデオ配信用プレイヤーで、HTML5 ビデオに対応しているかどうかを自動判定して、非対応のブラウザならば Flashが利用される仕組みになっているが、AndroidではFlashをサポートしなくなってしまいました（こちらを参照)。又、スマートフォンではソフトサブ表示出来ません。
HTML5 videoは、MP4（H.264）, WebM（VP8）の順で準備。
IExplorer 9でも、プレイリストからのリンク再生が可能です＼(^o^)／
IExplorer10は、HTTPD利用の自宅サーバではスキップ再生出来ません。

Video.js 4を利用したHTML5ビデオの配信

Video.js 4で
HTML5 ビデオの字幕表示

ここから入場

HTML5 videoは、MP4（H.264）, WebM（VP8）を準備。
Video.js 4は、HTML5 ビデオに対応しているかどうかを自動判定して、非対応のブラウザならば Flashが利用される仕組みになっている。
字幕表示の可・否の選択は可能だが、スマートフォンではソフトサブ表示出来ない。
IExplorer10は、HTTPD利用の自宅サーバではスキップ再生出来ません。

Flowplayer 5.4を利用したHTML5ビデオの配信

Flowplayer 5.4で HTML5 ビデオの字幕表示		Xserver　ここから
Flowplayer 5.4で ”パリから行く小さな旅”をプレイリスト付きで配信（500kbps）		ここから入場

HTML5 videoは、MP4（H.264）, WebM（VP8）を準備。
Flowplayer 5は、HTML5 ビデオに対応しているかどうかを自動判定して、非対応のブラウザならば Flashが利用される仕組みになっている。
他のHTML5ビデオ配信プレイヤーとは異なり、Androidブラウザでもソフトサブの表示が可能だ（但し、表示の可否は不可) ＼(^o^)／
Windows7のIExplorer 9は、プレイリストからのリンクが作動しません ┓(´_`)┏
IExplorer10は、HTTPD利用の自宅サーバでは再生出来ません。

SublimeVideoを利用したHTML5ビデオの配信

SublimeVideoで HTML5 ビデオの字幕表示		Xserver　ここから
SublimeVideoでプレイリスト付き配信（500kbps）		ここから入場
SublimeVideoで HD Switching試験（500と1,500kbps）		ここから入場

HD Switching以外は MP4（H.264）, WebM（VP8）を準備。
SublimeVideoを利用するには、他のHTML5 Video Playerとは異なり、自分の配信サイトを登録してHOSTNAMEを取得する必要がある（こちらを参照)。
プレイリスト表示は、Opera Mobile(12)以外は全てのブラウザで作動するが、スマフォでの字幕表示はOpera(14), Chrome(18) に限られる。

問題点3：HTML5 ビデオはプロバイダによっては上手く配信出来ない
So-netとiDiskサイトでは、IE9, FirefoxでWebMの再生不可

各種プロバイダのHTML5 ビデオへの対応状況

　HTML5 ビデオ表示
における配信サイトの不具合

ここから入場

筆者が常用するKATCHサイトにおいて、HTML5でホームページをリニューアルしたところ、IExplorer 9＋WebMIE9でHTML5 ビデオの再生不可。Firefox 5でWebMの再生不可などの不都合があった（直訴したら・・・2011.06.28に対応済み）。
そこで、筆者が契約している他のサーバ：MICS、MOMOたろう、So-net、.Xserver及び自宅サーバ配信のサイトと比較試験をしてみました。
詳細は、「HTML5表示における配信サイトの不具合」をご参照下さい。

＜参考＞WebM動画：話題のHTML5ビデオ形式

WebM動画のストリーミング配信

WebM動画とは、GoogleがHTML5を利用出来るブラウザでプラグインを必要とせずにストリーミング再生可能な規格として採用した新しい動画形式。
「WebM動画の作成（変換）ツール」と「携帯動画変換君＋新FFmpeg..」参照。

I. VP8圧縮WebMの配信

ツアー”天空の楽園”
アンコール王朝を
WebMで配信（750kbps）

ここから入場
携帯動画変換君＋新FFmpegで変換

注意
1)現在 Opera 10.6以降、Google Chrome 6以降とFirefox4.0Beta以降が対応しています（Chromeがお勧めだが、Windows2K、PowerPCは対象外）。
IExplorer 9とSafari 5.02は、VP8には未対応だが、IExplorer 9+WebM for IE9で再生可能。
＊IExplorer 10 PP+WebM for IE9 も再生可能だが、自宅サーバではiframe内の場合：導入ページは何故か再生出来ない。
iCab 4.8は、MacOSX10.6, 10.7では再生可能だが、10.4, 10.5では未対応。
詳細は、「WebM動画のHTML5配信と再利用」を参照。
2)IExplorer 6以降＋Google Chrome Frame（ここから入手）は、サーバ側でmetaタグが記載されていないと視聴出来ませんが、当サイトでは視聴可能となっています。

追記（2014.06.07)
II. VP9圧縮WebMの配信

次世代圧縮映像VP9への変換と各種ブラウザの対応

VP9圧縮WebMで
オープニングムービー配信
（375kbps)

ここから入場

次世代の映像VP9圧縮WebMは、現行と同じ画質でも半分のファイルサイズで済むと云う圧縮技術。WebM対応の Windowsブラウザは HTML5ビデオとして再生可能となった。
Android 4.1.2は Firefoxのみが不完全対応だが、Android 4.4.2では全ブラウザで再生可能（但し、描画が悪い等の問題がある)。
iOS端末では再生不可。

＝HTML5 オーディオ＝

HTML5 Audioの設定方法と各ブラウザの対応状況

HTML5 オーディオの
ブラウザ対応試験

ここから入場

いずれのブラウザにも対応させるには、今回はMP3とOGGの二種類＋Flashを用意したが、サーバによってはAACとOGGはトラブル事。＋OGGの場合に不思議な輪唱が発生する事から MP3, WAV＋Flashの組み合わせがよい。