web-dev-qa-db-ja.com

HTML5-IE9でmp4ビデオが再生されない

IE9でHTML5を使用して再生したいmp4ビデオ<video> 鬼ごっこ。 MIMEタイプをIIS 7に追加したため、http://localhost/video.mp4これは、ChromeとIE9で再生されますが、HTML5では再生されません。Chromeは、ビデオをHTMLで再生します。コードは次のとおりです。

<html>
<body>
  <video src="video.mp4" width="400" height="300" preload controls>
  </video>
</body>
</html>

何か案は？

ありがとう

更新：

Firefox 5.0で同じファイルを試してみても動作しませんでした。Chromeのみがmp4ビデオを再生できます。

html5internet-explorer-9html5-video
36
user623892

すべてのブラウザをサポートするために http://videojs.com/ を使用することになりました。

しかし、ビデオをIE9で動作させるには、Chrome html5 docタイプを追加し、mp4を使用しました。

<!DOCTYPE html>
<html>
<body>
  <video src="video.mp4" width="400" height="300" preload controls>
  </video>
</body>
</html>
18
user623892

iE9の場合、モードを設定するにはメタタグが必要であることがわかりました

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

<video width="400" height="300" preload controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag
</video>
41
clif

それでも動作しない場合は、確かに解決策があります：圧縮形式H.264でmp4をエンコードします。 mpeg4またはdivxなどの形式でエンコードすると、IE9では機能せず、Google Chromeがクラッシュする可能性があります。そのためには、Any Video Converterフリーウェアを使用します。しかし、それはそこにあるどんな良いビデオツールでもできます。

ここにリストされているすべてのソリューションを試し、他の回避策を数日間試しましたが、mp4の作成方法に問題がありました。 IE9は、H.264以外の形式をデコードしません。

これがお役に立てば幸いです、ジミー

17
Jimmy Boyd

ダンは最高の答えの1つを持っています。サポートされているビデオ形式を確認するには、ターゲットブラウザーで html5test.com を使用することをお勧めします。

上記のように、単一のフォーマットは機能せず、私が使用しているのはH.264、WebM、およびフラッシュフォールバックにエンコードされたMP4です。これにより、次のビデオを表示できます。

勝利7-IE9、Chrome、Firefox、Safari、Opera

Win XP-IE7、IE8、Chrome、Firefox、Safari、Opera

MacBook OS X-Chrome、Firefox、Safari、Opera

iPad 2、iPad 3

Linux-Android 2.3、Android 3

<video width="980" height="540" controls>
        <source src="images/placeholdername.mp4" type="video/mp4" />
        <source src="images/placeholdername.webm" type="video/webm" />
        <embed src="images/placeholdername.mp4" type="application/x-shockwave-flash" width="980" height="570" allowscriptaccess="always" allowfullscreen="true" autoplay="false"></embed>  <!--IE 8 - add 25-30 pixels to vid height to allow QT player controls-->    
    </video>

注：.mp4ビデオは、すべてのモバイルデバイスで再生できるように、h264基本プロファイルでコーディングする必要があります。

更新：autoplay = "false"をFlashフォールバックに追加しました。これにより、ページがIE8に読み込まれたときにMP4がすぐに再生を開始するのを防ぎ、再生ボタンが押されると再生を開始します。

8
user1344843

Internet Explorer 9は、H.264コーデックを使用したMPEG4をサポートしています。ただし、ダウンロードを開始するとすぐにファイルの再生を開始できる必要もありました。

IE9で機能するMPEGファイルを作成する方法の基本的な手順を次に示します（Ubuntuでavconvを使用）。私はそれを理解するのに多くの時間を費やしたので、他の人を助けることができることを願っています。

  1. H.264コーデックを使用してビデオをMPEG4に変換します。特別なものは必要ありません。avconvに任せてください。

    avconv -i video.mp4 -vcodec libx264 pre_out.mp4

  2. このビデオは、IE9を除くMPEG4をサポートするすべてのブラウザーで動作します。 IE9のサポートを追加するには、ファイル情報をファイルヘッダーに移動する必要があります。これにより、ブラウザーはダウンロードを開始するとすぐに再生を開始できます。これIS IE9の鍵!!!

    qt-faststart pre_out.mp4 out.mp4

qt-faststartは、H.264/ACCファイル形式もサポートするQuicktimeユーティリティです。 libav-toolsパッケージの一部です。

6
Gael Lafond

あるサーバーで再生し、別のサーバーでは再生しない基本プロファイル.mp4ビデオがあります。

唯一の違いは次のとおりです。
oneはヘッダー"Content-Length: ..."
他の"Trasfer-Encoding: chunked".

Content-Lengthは不要であり、重要なのは、チャンク化されたヘッダーがないことです。これは、.mp4ファイルの圧縮（deflateまたはgzip）をオフにすることで実行できます。これを行う方法は別の問題であり、別のトピックです。 。htaccessファイル内の一部のメディアファイルのApache gzip圧縮を無効にする方法？

別のサーバーの問題がある可能性があります。
_"Content-Type: video/mp4"
と"Content-Type: text/plain"

3
Balazs Nemeth

私が聞いたことから、ビデオのサポートはせいぜい最小限です。

http://diveintohtml5.ep.io/video.html#what-works から：

これを書いている時点で、これはHTML5ビデオの風景です。

  • Mozilla Firefox（3.5以降）は、OggコンテナでTheoraビデオとVorbisオーディオをサポートしています。 Firefox 4はWebMもサポートしています。

  • Opera（10.5以降）は、OggコンテナでTheoraビデオとVorbisオーディオをサポートしています。 Opera 10.60はWebMもサポートしています。

  • Google Chrome（3.0以降）はOggコンテナでTheoraビデオとVorbisオーディオをサポートします。GoogleChrome 6.0はWebMもサポートします。

  • MacおよびWindows PC（3.0以降）上のSafariは、QuickTimeがサポートするものをすべてサポートします。理論的には、サードパーティのQuickTimeプラグインのインストールをユーザーに要求することができます。実際には、これを行うユーザーはほとんどいません。したがって、QuickTimeが「すぐに」サポートする形式が残っています。これは長いリストですが、WebM、Theora、Vorbis、またはOggコンテナは含まれていません。ただし、QuickTimeには、MP4コンテナでのH.264ビデオ（メインプロファイル）およびAACオーディオのサポートが付属しています。

  • AppleのiPhoneやGoogleなどの携帯電話Android電話は、MP4コンテナでH.264ビデオ（ベースラインプロファイル）とAACオーディオ（「低複雑度」プロファイル）をサポートします。

  • Adobe Flash（9.0.60.184以降）は、MP4コンテナーでH.264ビデオ（すべてのプロファイル）およびAACオーディオ（すべてのプロファイル）をサポートします。

  • Internet Explorer 9は、MP4コンテナーでH.264ビデオとAACまたはMP3オーディオのすべてのプロファイルをサポートします。また、サードパーティのコーデックをインストールすると、WebMビデオも再生されます。サードパーティのコーデックは、Windowsのどのバージョンにもデフォルトではインストールされません。 IE9は、他のサードパーティコーデックをサポートしていません（QuickTimeで再生できるものを再生するSafariとは異なります）。

  • Internet Explorer 8はHTML5ビデオをまったくサポートしていませんが、実質的にすべてのInternet ExplorerユーザーがAdobe Flashプラグインを使用できます。この章の後半で、HTML5ビデオを使用しながら、優雅にFlashにフォールバックする方法を示します。

また、同じページのすぐ下にあるこのセクションに注意してください。

すべてのHTML5ブラウザで機能するコンテナとコーデックの単一の組み合わせはありません。

これは、近い将来に変更される可能性はありません。

これらすべてのデバイスとプラットフォームで動画を視聴可能にするには、動画を複数回エンコードする必要があります。

3
stslavik

すべてのブラウザで正常に動作する両方の形式を使用します。

<video width="640" height="360" controls>
    <!-- MP4 must be first for iPad! -->
    <source src="unbelievable.mp4" type="video/mp4" /><!-- Safari / iOS video    -->
    <source src="movie.ogg" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
</video>
2
shihab

Internet ExplorerとEdgeは、ChromeがサポートするMP4形式をサポートしていません。ffprobeを使用して正確なMP4形式を確認できます。私の場合、次の2つのビデオがあります。

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'a.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf56.40.101
  Duration: 00:00:12.10, start: 0.000000, bitrate: 287 kb/s
    Stream #0:0(und): Video: h264 (High 4:4:4 Predictive) (avc1 / 0x31637661), yuv444p, 1000x1000 [SAR 1:1 DAR 1:1], 281 kb/s, 60 fps, 60 tbr, 15360 tbn, 120 tbc (default)
    Metadata:
      handler_name    : VideoHandler


Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'b.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf57.66.102
  Duration: 00:00:33.83, start: 0.000000, bitrate: 505 kb/s
    Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 1280x680, 504 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
    Metadata:
      handler_name    : VideoHandler

どちらもChromeで正常に動作しますが、最初のエラーはIEとEdgeで失敗します。問題はIEとEdgeはyuv444をサポートしていませんです。このような下の色空間：

ffmpeg -i input.mp4 -pix_fmt yuv420p output.mp4
1
Timmmm

上記の回答のいずれかが機能せず、Apacheサーバーを使用している場合は、.htaccessファイルに次を追加します。

//most of the common formats, add any that apply
AddType video/mp4 .mp4 
AddType audio/mp4 .m4a
AddType video/mp4 .m4v
AddType video/ogg .ogv 
AddType video/ogg .ogg
AddType video/webm .webm

同様の問題があり、これを追加すると、再生に関するすべての問題が解決しました。

1
wiz

Windows Web App GalleryからIIS Media Services 4.1をインストールする必要がありました。

http://www.Microsoft.com/web/gallery/install.aspx?appsxml=http://www.Microsoft.com/web/webpi/3.0/MediaProductList.xml&appid=MediaServices

0
snyderthing

JavaScriptなしで、エラーなしでプレイできる唯一の方法：

<!--[if lte IE 9]>
<!-- PUT HERE A FLASH PLAYER WITH video.flv -->
<![endif]-->

<!--[if gt IE 9]><!-->
<video controls class="video">
    <source src="video.mp4" type="video/mp4">
    <!-- REPEAT FLASH PLAYER CODE HERE -->
</video>
<!--<![endif]-->
0
lucasgabmoreno

以下を試して、動作するかどうかを確認してください。

<video width="400" height="300" preload controls>
  <source src="video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
0
MRR0GERS