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

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


=各種プロバイダのHTML5 ビデオ/CSS3への対応状況はまちまちで困惑=
(2011.06.19作成, 11.07.05更新)
筆者が常用するKATCHサイトにおいて、HTML5でホームページをリニューアルしたところ、
IExplorer 9+WebMIE9でHTML5 ビデオの再生不可(Flashタイトルムービー)。
Firefox 5でWebMの再生不可(下記試験)。
Opera 11でHTML5/CSS3の背景画像を上手く表示出来ない(Topページと各メインコーナー)。
IExplorer 8で ”CSS3 PIE”によるCSS3の実現が全く出来ない(CSS3実現のIE6~8対応試験)。
と云う不都合があった。
HTML5表示が普及して来ているにも拘らず、KATCH配信では IExplorerでHTML5を視聴し難い事は落胆だ (>_<、)
追記:2011.06.28以降は、Opera以外の不具合は対応して頂き解消した \(^o^)/
そこで、筆者が契約している他のサーバ:MICS、MOMOたろう、So-net、.Mac iDisk 及び AN HTTPDで構築した自宅サ
ーバ配信のサイトと比較試験をしてみた。
なお自宅サーバ配信は、追記(2011.06.26)で示したように配信システムの違いで成績に不可解な差違を認めた。
MIME設定有り: So-net契約のNTT西日本FTTH(実測上り18Mbps前後)、コレガルータBAR EXを使用して常時配信、

MIME設定無し: KATCH契約のCATV(実測上り4Mbps前後)、コレガルータCG-BARFX3を使用して不定期配信した。
検証は、64ビットWindows 7(Mac版Safari のみMac OSX10.6)上で実行した。 IExplorer 8はDivX Plus Web Player未イ
ンストール、Flash Playerインストール環境のXPモードで検証した。
 
 
 
I.HTML5 ビデオ再生の不具合
 
A)HTML5 ビデオを個別に配信
1)別記の方法で、HTML5対応ビデオを作成し(こちらを参照)、HTML5文書を記述して(こちらを参照)配信した。
IExplorer+Google Chrome Frame (ここから入手)にも対応出来るように、<meta http-equiv="X-UA-Compatible"
content= "chrome=1">タグも記述した。
「.htaccess」ファイルには以下を記載して配置したが、So-netサイトへはアップロード出来ない。
AddType video/mp4 .mp4
AddType video/ogg .ogg
AddType video/webm .webm
2)受信方法
So-netサイト以外は、AddType video/...記載の「.htaccess」ファイルの添付無し及び有りの両方で受信して比較した。
IExplorer 9は ”WebM for IE9(WebMIE9)”を、Safari には QuickTimeに”Xiph QuickTime Components(XiphQT)”を
インストールして使用した。
WebMIE9: IExplorer 9でWebMの再生を可能にするプラグイン(「WebM for IE9...」を参照)

XiphQT: SafariでOGGの再生を可能にするQuickTimeコンポーネント(「Xiph QuickTime...」を参照)。
 
<注意1>DivX Plus Web Player 2.1以降インストール環境でMP4を再生すると、ChromeとMac版Safari及び IExplorer
Chrome Frameは、DivX Plus Web Playerで再生されてしまいます。アドオン/機能拡張で ”DivX Plus Web Player
HTML 5<video>”無効 にしてご覧下さい(「DivX Plus Web Player 2.1...」を参照)。但し、IExplorer +Chrome Frame
ではアンインストールしないと上手く無効化出来ない不都合があるので、DivX Plus Web Playerインストール環境の
IExplorer 9 +Chrome Frameは
参考に示した。
 
<注意2>自宅サーバ ”a)MIME無”は、平日8:30~12:30、16:00~19:30の不定期に私用パソコンを使用している時に
しか配信していません。
 
3)成績 (2011.06.19現在)
 
 
配信サイト 
検証ブラウザ
再生
動画
KATCHサイト
MICSサイト
MOMOサイト
So-netサイト
b).htaccess有
Xserverサイト
自宅サーバ
b)MIME設定有
 IExplorer 9
+WebMIE9
MP4
再生不可
06.28以降
再生可能
再生可能
再生可能
.htaccessで
再生可能
再生可能
WebM
再生不可
06.28以降
.htaccessで
再生可能
.htaccessで
再生可能
再生不可
.htaccessで
再生可能
.htaccessで
再生可能
OGG
ブラウザが元々未対応
 Firefox 5 *)
MP4
ブラウザが元々未対応
WebM
再生不可
06.28以降
.htaccessで
再生可能
.htaccessで
再生可能
再生不可
.htaccessで
再生可能
.htaccessで
再生可能
OGG
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
 Opera 11
MP4
ブラウザが元々未対応
WebM
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
OGG
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
 Chrome 12
MP4
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
WebM
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
OGG
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
<参考>IExplorer 9
+Chrome Frame
MP4
DivX再生
DivX再生
DivX再生
DivX再生
DivX再生
DivX再生
WebM
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
OGG
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
  Safari 5 [Win版]
+QT+XiphQT
MP4
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
WebM
ブラウザが元々未対応
OGG
今回のムービーでは再生不可
 Safari 5 [Mac版]
+XiphQT
MP4
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
WebM
ブラウザが元々未対応
OGG
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
 IExplorer 8
 +Chrome Frame 無効
MP4
ブラウザが元々未対応
WebM
ブラウザが元々未対応
OGG
ブラウザが元々未対応
  IExplorer 8
+Chrome Frame
 有効
MP4
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
WebM
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
OGG
再生可能
再生可能
再生可能
再生可能
再生可能
再生可能
 
成績の解釈
再生不可: AddType video/...記載の「.htaccess」ファイルを配置しても再生出来るようにならない。
但し、So-netサイトは.htacessファイルをアップロード出来ない。
DivX再生: DivX Plus Web Player 2.1以降インストール環境では ”DivX Plus Web Player HTML 5<video>”無効
設定しておいても、MP4はお節介な DivX Plus Web Playerで再生されてしまう。

Firefoxは HTM5の video loop によるループ再生に未対応だが、・・・javascriptで対応可能なので 下記に提示
WebMを IExplorer 9+WebMIE9とFirefoxで再生する場合には、AddType video/...記載の「.htaccess」ファイルが必要だが
・・・KATCHサイトと.MaciDiskサイトでは、AddType video/...記載の「.htaccess」ファイルが作動しないようだ ? (>_<、)
KATCH配信のMP4を IExplorer 9で再生出来ない事は不可解だ ?(゜_。)? ⇒2011.06.28以降は再生可能となり解消した。
.MaciDisk配信のOGGを Firefoxで再生出来ない事も不可解だ ?(゜_。)?
Win版Safari+QuickTime+XiphQTはいずれのサイトでもOGGを再生出来なかった(一方、Mac版Safari+XiphQTでは再生
可能)。・・・SUPER c 2010b38で作成したVorbis音声付OGG動画の場合は再生可能だったが(こちらのOGG動画)、今回
は c2011, b48で音声無しファイルとして作成した為なのであろうか ?(゜_。)?
・・・Win版とMacOSX10.7のSafari 5.1はOGGの再生が出来なくなってしまった。
 
 
 
B)三種類のHTML5 ビデオ+Flashムービーで配
1) 配信方法: <source>タグで複数のHTML5 ビデオを指定して配信した(こちらを参照)。
HTML5 ビデオを MP4(H.264), WebM(VP8)、OGG(Theora)の順に記載。HTML5 ビデオ未対応のIExplorer 8用にFlash
ムービー(SWFファイル)も<object>タグで追記した。
Firefoxは HTML5 Videoの loopではループ再生出来ない為、下記 javascriptを記述した対応策 IIで配信した。
なおKATCHサイトは、2011.06.28以降 「.htaccess」ファイルを添付しなくても支障なく再生可能となった。
2)成績 (2011.06.19現在)
 
 
配信サイト 
検証ブラウザ
KATCHサイト
b) パス
MICSサイト
a) パス
MOMOサイト
a) パス
So-netサイト
b).htaccess有
Xserverサイト
a) パス
自宅サーバ
a) パス
b)MIME設定有
  IExplorer 9
+WebMIE9
再生不可!
06.28以降可能
MP4で再生
MP4で再生
MP4で再生
MP4で再生
MP4で再生
  Firefox 5 *)
OGGで再生
06.28以降........
WebMで再生
WebMで再生
WebMで再生
OGGで再生
WebMで再生
WebMで再生
  Opera 11

WebMで再生

WebMで再生

WebMで再生

WebMで再生

WebMで再生

WebMで再生

  Chrome 12
MP4で再生
MP4で再生
MP4で再生
MP4で再生
MP4で再生
MP4で再生
<参考>IExplorer 9
+Chrome Frame
DivX
MP4再生
DivX
MP4再生
DivX
MP4再生
DivX
MP4再生
DivX
MP4再生
DivX
MP4再生
  Safari 5 [Win版]
+QT+XiphQT
MP4で再生
MP4で再生
MP4で再生
MP4で再生
MP4で再生
MP4で再生
  Safari 5 [Mac版]
+XiphQT
MP4で再生
MP4で再生
MP4で再生
MP4で再生
MP4で再生
MP4で再生
  IExplorer 8
 +Chrome Frame 無効
SWFで
再生可能
SWFで
再生可能
SWFで
再生可能
SWFで
再生可能
SWFで
再生可能
SWFで
再生可能
 
成績の解釈
成績はテストA)と矛盾なく、ブラウザは記述された順に再生可能なビデオを利用する。
HTML5に未対応のIExplorer 8はFlashムービー(SWF)で再生されるが、HTML5対応ブラウザでHTML5 ビデオが再生出
来ない場合(KATCH配信の IExplorer 9と .MaciDisk配信の Firefoxの場合)に、Flashムービーで代用して再生出来るよ
うになる訳ではない。
 
追記(2011.07.05)
FirefoxのHTML5 ビデオループ再生を可能にする方法
Firefoxは HTML5 videoloop によるループ再生に未対応だが、javascriptで対応可能だ。
 
 
I. HTML5 Video Loop Support for Firefoxこちら)の javascriptを導入する方法が解らな
かったので、
<video>タグ内に記述する loopを video onended="this.play();" loop / に変更して配信
  Firefoxループ再生
の対応策
I
 こちらに提示
した。
・・・残念ながら IExplorer 9 のみが再生出来なくなってしまう (>_<、)
 
 
II. HTML5 Audio Loopsこちら)のLoop Method 2を参考に、
<video... を <video id="video_2"... に変更し、</video>の後に次の javascriptを
配信した(注意:<video...>タグの前に記述しても有効にならない)。
<script type="text/javascript">
document.getElementById('video_2').addEventListener('ended', function(){
this.currentTime = 0;
}, false);
</script>

Firefoxループ再生
の対応策
II
 こちらに提示
・・・いずれのブラウザでも不都合なくループ再生可能だ\(^o^)/
 
 
 
II.HTML5/CSS3表示の不具合
1)TML5/CSS3の作成方法は、「このページの作成方法と閲覧上の注意」を参照。
サンプルページは、「IExplorer 8でもCSS3機能をCSS3 PIEで実現」+「文字陰影をIE-CSS3で実現」で作成した。
So-netサイト以外は念の為に ”AddType text/x-component .htc” 記載の「.htaccess」ファイルを添付した。
IEのインターネットオプション>セキュリティのインターネットで「レベルのカスタマイズ内の「拡張子ではなく、内容
によってファイルを開く」が「無効」になっていると .htcが実行されないので、初期設定の「有効」にしておく。
なお、<meta http-equiv="X-UA-Compatible" content="chrome=1">タグは記述していない為、 IExplorer+Chrome
Frameを有効にしても作動しません。
2)成績 (2011.06.19現在)
 
 
配信サイト 
検証ブラウザ
KATCHサイト
こちらでテスト
.htaccess無
MICSサイト
こちらでテスト
.htaccess有
MOMOサイト
こちらでテスト
.htaccess有
So-netサイト
こちらでテスト
.htaccess無
Xserverサイト
こちらでテスト
.htaccess有
自宅サイト
こちらでテスト
MIME設定有
  IExplorer 9
相当に問題なし
相当に問題なし
相当に問題なし
相当に問題なし
相当に問題なし
相当に問題なし
  Firefox 5
問題なし
問題なし
問題なし
問題なし
問題なし
問題なし
  Opera 11
背景画像のみ上
手く表示出来ない
→v.11.60で解消
背景画像のみ上
手く表示出来ない
→v.11.60で解消
背景画像のみ上
手く表示出来ない
→v.11.60で解消
相当に問題なし
相当に問題なし
相当に問題なし
  Chrome 12
問題なし
問題なし
問題なし
問題なし
問題なし
問題なし
  Safari 5 [Win版]
問題なし
問題なし
問題なし
問題なし
問題なし
問題なし
  Safari 5 [Mac版]
問題なし
問題なし
問題なし
問題なし
問題なし
問題なし
=CSS3機能を「CSS3 PIE」で実現=
  IExplorer 8
 +Chrome Frame 無効
ボックスの表示
すら出来ず、全
く使い物になら
ない!
→2011年
06月28日以降解消
AddType...記載の
.htaccessあれば
不都合なし
.htaccess無くても
不都合なし
背景画像の
み表示出来
ない

.htaccessアップ
出来ない
.htaccess無くても
不都合なし
背景画像の
み表示出来
ない?
⇒追記で再
検して原因
を追求
 
成績の解釈
相当に問題なし: ブラウザのCSS3表示能力は完全ではないが、配信サイトに問題がある訳ではない。
IExplorer 9はnavボタンの角丸と文字陰影とボーダー枠に画像を表示出来ず、Operaはnavボタンを表示出来ない。
→詳細は、「HTML5対応ブラウザのCSS3表示能力」を参照。
Operaの”背景画像のみ上手く表示出来ない”は、4個の背景画像の内最初に指定した画像しか表示出来ない。
→Opera 11.60でこの不具合は解消した ヾ(^-^)/
不都合なし: CSS3 PIEでボックスの角丸, ボックス陰影, ナビゲーションの表示及び背景画像の複数表示が可能となる。
IE-CSS3で文字陰影の表示も可能となる。しかし、ボックス透明化の実現不可。背景画像をプロパティ通りに実現出来
ない。ボーダー枠に画像表示を上手く実現出来ない等の制限はあるが、配信サイトの問題ではない。
→詳細は、「IExplorer 8でもCSS3機能をCSS3 PIEで実現」を参照。
IExplorer 8のCSS3 PIEによるCSS3機能の実現において、
KATCHサイトではAddType text/...記載の「.htaccess」ファイルが作動しないようだったが、.MaciDiskサイトではAddType
video/...
の場合とは異なり作動する・・・このような限定した制限方法も可能なのか ?(゜_。)?
→06.28以降 KATCHサイトは .htaccessを添付しなくても不都合なし
自宅サーバサイトにMIMEタイプ:
text/x-component、拡張子:htcを設定しても、何故か?背景画像を表示出来ない
・・・方策が有るに違いないのだが浅学の為見出せない ヽ(´ヘ`;)ノ⇒追記(2011.06.25)を参照。
 
 
 
結果と考察
1)プロバイダによって IExplorer, FirefoxとOperaの HTML5 ビデオ/CSS3表示への対応には差違のある事が判明し、未だ
充分に対応出来ていない配信サイトもある事が分かった。

即ち、HTML5 ビデオ入りの文書を使用するなら MICS, MOMO又は自宅サーバで配信すればよいが、前二者はOperaの
CSS3表示に若干の問題があり、後者はIExplorrer 8のCSS3実現に不可解な問題がある。
2)IExplorer 8用にはFlashムービーを追加しておけば、いずれのサイトでも Flash Playerインストール環境なら SWFで再生可
能だ。しかし、HTML5対応のブラウザでHTML5 ビデオが再生出来ない場合に、SWFで代用再生出来る訳ではない。
3)アップするTHML5文書に<meta http-equiv="X-UA-Compatible" content="chrome=1">タグを記載しておけば、ユーザ
側が Google Chrome Frameを導入してくれれば IExplorer の不都合は解消されるのだが・・・その普及率は如何程のも
のか 疑問だ ?(゜_。)?
4)KATCHさんもそろそろ HTML5のこれら不具合に対応してもよい時期に来ており、早々の改善が期待される。
・・・KatchさんからTELで回答(2011.06.21)
現在「.htaccess」ファイルが作動しないように制限が掛けてあります。
KATCHでのみ IExplorer 9で MP4(H.264)が再生出来ない理由は不明かどうか?
ご不便に対応出来るかは今後検討してみます。
との事のようだ ヽ(-_-;)/
セキュリティ上「.htaccess」ファイルの作動制限が必要なら、.MaciDiskのような限定許可が出来ないものか!
5)プロバイダが対処出来ない場合は、見込みの低い IExplorer, Firefoxの改革版が提供される事を期待するしかない。
・・・Operaは10.6→11.0になって、HTML5 WebMの再生にAddType...記載した.htaccessの必要は無くなったが、配信サ
イトによっては発生するCSS3/background-image表示の不具合は未解決のままだ。
 
追記(2011.06.26)
自宅サーバ配信で「IExplorer 8のCSS3 PIEによるCSS3機能の実現」を再検証
 
 
MIME設定有り:So-net契約のNTT西日本FTTH、コレガルータBAR EX使用
(1) 無料DDNSサービス:家サーバー・プロジェクト経由
⇒成績: 背景画像のみ表示出来ない (>_<、)
こちら(常時配信)でテスト
http://kakonacl.dip.jp/index3_ie-css3.html
MIME設定有り:So-net契約のNTT西日本FTTH、コレガルータBAR EX使用
(2) DDNSサービスを経由せず、グローバルIPアドレスでアクセス
⇒成績: 不都合なし ヾ(^-^)ゞ 但し、IPアドレスは時々変更してしまう (;_;)
こちら(常時配信)でテスト
 http://Global IPアドレス/index3_ie-css3.html
MIME設定無し:KATCH契約のCATV、コレガルータCG-BARFX3使用
無料DDNSサービス: No-IP Dynamic DNS経由
⇒成績: 不都合なし \(^o^)/
こちら(不定期配信)でテスト
 8:30~19:30の不定期に配信
 
<結果と考察>
MIMEを設定しても、現在常時配信で利用しているFTTH、BAR EX、家サーバー経由での自宅サーバの場合は不具合
が発生する。

MIMEを設定しなくとも、CATV、CG-BARFX3No-IP Dynamic DNS経由で自宅サーバを構築すると不都合なく配信出来るのだ。
再々度、理解に苦しむ不可解な現象が検出された。
・・・これは、契約プロバイダの制限によるものか? コレガルータBAR EXの性能に起因するのであろうか? ⇒(3)へ
 
<備考>2003年以来常時接続の自宅サーバを運営していて、この配信システムで苦慮した不都合は今回で 三度目
と少ないトラブルだが・・・
(1)当コンテンツのNSVムービーをWinamp 5.5以降では上手く視聴出来ない場合が多い(VLC MediaPlayerではトラ
ブルなし、こちらを参照)。 
・・・So-net、CATCHいずれも、SHOUTcast TVやBitTorrent(P2P)が上手く出来ないので諦めた。
(2)当初から導入しているルータBAR EXはWake On LAN非対応だったが、このルータ越えで遠隔地にあるコンピュ
ータから電源投入が可能となるよう無理やり WOLを構築した(こちらを参照)。
 
  なお、配信サイトが原因で発生する以下の字幕表示の不都合は、自宅サーバでは起こっていない♪♪
SAMI字幕付きWindows Mediaの再生 iDiskサーバの場合にはWindows 7のWMP12で字幕表示出来ない。
SilverlightによるWindows Mediaの字幕表示:MICS等レンタルサーバの場合には DFXP字幕を表示出来ない。
 
(3)今回のトラブルに対して、
先ずルータを CG-BARFXに変更して試験してみたが・・・やはり背景画像のみ表示出来なかった (>_<、)

ルータ BAR EXが、 IPアドレス変更前の以前に取得した ドメイン→ IPアドレス変換情報を保持している為にドメ
インの解決が出来ない事もあるようで、ルータの電源を挿し直して解決と、この試験には苦慮させられたが、

グローバルIPアドレス名でアクセスしたら、背景画像の表示も可能となり不都合は起こらない ヽ(^o^;)ノ
・・・ナッ何んと!家サーバではドメインーIP変換過程で、何らかの不具合により CSS3 PIEの処理が上手く実行され
背景画像を表示出来ないのだ ?(゜_。)?
 
結語
IExplorer 9が登場してHTML5文書での配信が現実的になったが、IExplorer 8ユーザの問題とHTML5 ビデオへのブラウ
ザ間の対応問題の他にもプロバイダの対応問題もあり、一般ユーザがホームページに採用するには障害が多い。
上記不具合は、ホームページを自宅サーバに変更して現在のDDNSサービスを変更する事でのみ全てに対応可能だが、
その為には絶対リンクを書き直す膨大な作業が必要なので、当面は不具合が有っても致し方ない・・・
追記(2011.06.28)
KATCHさんに .htaccessを添付しなくても不都合がないように対応して頂き、OperaのCSS3/background-image表示の
不具合(これはOpera 11.60で解消)以外は解消した。
 




| Kenのムービー計画へ >動画狂コーナーへ |