mp4ファイルをXHTML1.0で埋め込み再生する

動画などのマルチメディアファイルの再生には、XHTML1.0・HTML4.01では、
objectタグの使用が推奨されている。
しかし、MSIE_Ver.11では再生されなかった。

非推奨とされているembedタグではすべてのブラウザで再生できた。

どうするか?

embedで記述するということもできるが、
今回は、javascriptでMSIEかどうかを判定し、それによってタグを使い分けるという方法でやってみた。
参考にしたのは、「詳解HTML&CSS&Javascript辞典・第6版」秀和システム

最初に以下のコードで判定した。
if( navigator.appCodeName == “MSIE” ){
document.write(‘<embed ~~ 略 ~~’)
} else {
document.write(‘<object ~~ 略 ~~’)
}

ところが、僕の使ったMSIE Ver.11 は反応しなかった。

それで調べてみたら、ネット上で以下の記述に出会った。


IE10まではMSIEの文字列とその直後の数字で、Webブラウザ・バージョンの判定ができていました。多くのサービスが、判定にはこの文字列を利用しているはずです。しかし、IE11からは「MSIE」の文字列が無くなり、バージョンを表す数字も削除されてしまいました。
ただし、Tridentというブラウザエンジンを判断する情報は残されています。また、新しく「rv:11.0」というバージョンを表す別の情報が追加されています。


「IE11のユーザエージェント問題 – 開発者側でできる対策 (判定方法の変更/互換性モードの利用)」
( http://furoshiki.hatenadiary.jp/entry/2013/11/11/224605 )

その筆者の提案するやり方でIEの判定をすることにした。


// IEであるか否かの判定
var isIE = false; // IEか否か
var version = null; // IEのバージョン
var ua = navigator.userAgent;
if( ua.match(/MSIE/) || ua.match(/Trident/) ) {
isIE = true;
version = ua.match(/(MSIE\s|rv:)([\d\.]+)/)[2];

上記のスクリプトを、Webブラウザの設定やHTTP Responseヘッダ、ActiveDirectoryなど他の設定手段を無視して確実に動作させるには、HTMLドキュメント内で以下の設定が必要です。

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>


以上から、実際に記述したコードは以下のとおり。


<script type=”text/javascript”>
<!–
// IEであるか否かの判定
var isIE = false; // IEか否か
var version = null; // IEのバージョン
var ua = navigator.userAgent;
if( ua.match(/MSIE/) || ua.match(/Trident/) ) {
isIE = true;
version = ua.match(/(MSIE\s|rv:)([\d\.]+)/)[2];
}
if( isIE == true ){
document.write(‘IE_version : ‘, version )
document.write(‘<embed src=”video/pastaSauce.mp4″ type=”video/mp4″ width=”270″ height=”157″ /><noembed src=”video/poster.jpg” type=”image/jpeg” width=”270″ height=”157″></noembed>’)
} else {
document.write(‘<object type=”video/mp4″ data=”video/pastaSauce.mp4″ width=”270″ height=”157″><object data=”video/poster.jpg” type=”image/jpeg”></object></object>’)
}
–>
</script>


追記:
最初、document.writeのところを以下のように記述して、エラーが出た。
document.write(
‘<embed src=”video/pastaSauce.mp4″ type=”video/mp4″ width=”270″ height=”157″ />
<noembed src=”video/poster.jpg” type=”image/jpeg” width=”270″ height=”157″>
</noembed>’)
最初はなぜエラーが出たのかわからなかった。
で、もしやと思い、改行をなくしたら、エラーが消えた。