筆者が常用する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の不定期に私用パソコンを使用している時に
しか配信していません。
|
| |
|
| |
| |
|
|
|
|
|
|
|
|
|
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現在）
|
| |
| |
|
|
|
|
|
|
|
|
IExplorer 9
＋WebMIE9 |
|
|
|
|
|
|
|
Firefox 5 ＊) |
|
OGGで再生
→06.28以降........
WebMで再生
|
|
|
|
|
|
|
|
Opera 11 |
|
|
|
|
|
|
|
Chrome 12 |
|
|
|
|
|
|
<参考>IExplorer
9
＋Chrome Frame |
|
|
|
|
|
|
Safari 5 [Win版]
＋QT＋XiphQT |
|
|
|
|
|
|
Safari 5 [Mac版]
＋XiphQT |
|
|
|
|
|
|
|
|
IExplorer 8
＋Chrome Frame
無効
|
|
|
|
|
|
|
|
|
| |
成績の解釈
成績はテストA)と矛盾なく、ブラウザは記述された順に再生可能なビデオを利用する。
HTML5に未対応のIExplorer 8はFlashムービー（SWF）で再生されるが、HTML5対応ブラウザでHTML5
ビデオが再生出
来ない場合（KATCH配信の IExplorer 9と
.MaciDisk配信の Firefoxの場合）に、Flashムービーで代用して再生出来るよ
うになる訳ではない。
|
| |
追記 （2011.07.05）
FirefoxのHTML5
ビデオループ再生を可能にする方法
Firefoxは HTML5 videoの
loop によるループ再生に未対応だが、javascriptで対応可能だ。 |
| |
| |
I.
HTML5
Video Loop Support for Firefox（こちら）の
javascriptを導入する方法が解らな
かったので、
<video>タグ内に記述する loopを
video onended="this.play();"
loop / に変更して配信 |
|
した。
・・・残念ながら 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> |
|
|
・・・いずれのブラウザでも不都合なくループ再生可能だ＼(^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有
|
|
|
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-BARFX3、No-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で解消）以外は解消した。
|
