video タグで動画が再生されない。Windows 7 IE11 と Windows 8 IE11 は別物。

ie11

Internet Explorer 11 で HTML5 video タグで動画を埋め込んだ同じページを見ているのに、Windows 8.1 の IE 11 では再生されて、Windows 7 の IE 11 では動画が再生されないという現象に悩まされていたのだけど、解決しそうなのでメモ。

細かい検証は出来ていないので、話半分で。

 Win7 IE11 で「無効なソース」って言われる

IE11 video 無効なソース html5

無効なソース」って言われましても、Win8.1 の IE11 では普通に再生されてる。

一体何をもって無効なのかを教えて欲しい次第。

  • docutype 宣言が無い
  • MIME Types 書いた?

とかとか、その類の話はわりとすぐ検索で引っかかってきていると思うのだけど、その辺りを設定しても動画は再生できない。

IE(Internet Explorer) 11のHTML5プレイヤーにおいて、Windows 8.1のShuttleではYouTubeの1080p HD動画が再生できるのに、Windows 7ノートPCのIE 11では1080p HD動画の項目がなく720Pまでしか選択できない。今までは、Flash Playerを使っていたため気が付かなかった。Flash Playerでは、1080pも再生可能。

技術メモ: MSEは、Windows 7のInternet Explorer 11ではサポートされない | 沖縄通販生活 – 楽天ブログ

というエントリを見つけ、YouTube の話だよな・・・とは思いつつ、

そんなにいくつも試したわけではないけれども、画面サイズ横 1080px の動画と 720px の動画(.H264)を作成し、Win7 IE11 でページを表示してみると、驚いたことに 720px は再生された。

このことから、映像エンコード時のコーデック等に関係なく、サイズだけが問題になるっぽいと予測された。もうちょっと深く検証してみたいところだけど時間が無い。

# 映像の配信には AWS Cloud Front が使われています。
# 映像のサイズは定石と言われているサイズではないものを扱っています。

 OS による Internet Explorer 11 の違い

先に引用したエントリに記載されていたのだけど、YouTube HTML5 動画プレーヤーを訪れてみると

  • win8.1 IE11 は Media Source Extensions がサポートされている
  • win7 IE11 は Media Source Extensions がサポートされていない

という違いがあった。Media Source Extensions とは?

Internet Explorer 11 では、HTML5 の Media Source Extensions (MSE) を使った MPEG-DASH メディア ストリーミングのサポートが導入されています。 MSE は、プラグインを使わずにメディア ストリームを動的に変更できる video 要素や audio 要素を拡張します。これにより、アダプティブ メディア ストリーミング、ライブ ストリーミング、動画のスプライス、動画編集などの処理ができるようになります。
Microsoft Edge では、MSE のサポートが強化されており、最新の W3C Media Source Extensions 仕様に沿ったものになっています。
重要 Windows 7 の Internet Explorer 11 では、この機能はサポートされていません。

Media Source Extensions (MSE) (Windows)

ということで殆ど理解できないし、MSE のサポート有無が、動画の画面サイズの大きい物を読み込めるかどうかに繋がっているようにも読み取れないけど、とにかく違いがあるということだけははっきりした。

東京都内で仕事をしています。猫飼いたいです。30歳からピアノ始めたおじさんです。盆栽にも興味が出てきました。
最近ブログ用のTwitterアカウントを作成したので、是非フォローをしてください。@zakkiboooks

 コメントをどうぞ

  • 入力いただいたメールアドレスは公開されませんが、このブログが置いてあるサーバーに保存されます。
  • 入力いただいた情報の他に、WordPress の機能により IPアドレス を取得させていただきます。取得した IPアドレス はスパムコメントの対処ために利用され、公開することはありません。
  • 個人情報などを記入された場合、投稿いただいたコメントを表示しないか、該当箇所を編集して公開する可能性があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。