web-dev-qa-db-ja.com

IE10を使用してHTML5ビデオを機能させるには

ローカルイントラネットでHTML5ビデオを再生するために私が何ができるかについて誰かがアイデアを持っていることを願っています。

私のWebサーバー= Windows Server 2008 R2 Standard 64bit IIS version = IIS7

テストユーザー環境= Windows 7 Enterprise

ビデオは「Google Chrome」を使用して完全に再生されます

「IE10」を使用してビデオを再生できない

私のhtmlコードは次のとおりです：

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

IE10を使用する私のテストマシンはHTML5Rocksビデオを再生します ' http://craftymind.com/factory/html5video/CanvasVideo.html '

よろしく、

クリス

windows-7iis-7html5-videowindows-server-2008-r2internet-explorer-10
12
user2211781

.mp4にMIMEタイプvideo/mp4を使用するようにWebサーバーを設定してください。誤って.mp4をMIMEタイプvideo/mpegを使用するように設定しました。ビデオはChromeで再生されますが、IE11では再生されません。

また、ビデオがH264ビデオコーデックとAACオーディオコーデックを使用していることを確認する必要があります。

11
Adamy

私は同様の問題を抱えていましたが、私のサイトのHTML5はまったく機能しませんでした。空白だけのエラーメッセージはありません。

その理由は、Windows7 N（EU-メディアプレーヤーなし）でした。

Windows Media Playerをインストールすると、この問題（およびその他の問題）が修正されます。それが役に立てば幸いです:)

9
Rafal Powierski

何らかの理由でWin7 + IE10で動作しないようです。他はすべてよさそうだ。 ie.Microsoft.comテストを含む以下のページに対してテストされています。

http://ie.Microsoft.com/testdrive/graphics/videoformatsupport/default.htmlhttp://www.w3.org/2010/05/video/mediaevents.html

Win7 IE9 – OK

Win7 IE10 –いいえ

Win8 IE10 – OK

Win7 IE11 – OK

Win8 IE11 – OK

MSテストページのBrowserStackスクリーンショット。 http://www.browserstack.com/screenshots/9083c865675d0821ee8b1030a43da5fd36bff469

3
greg.kindel

IE10 HTML5ビデオもモダンUIアプリビデオも再生できない で説明されているように、ビデオカードドライバーに問題がある可能性があります。

IEでGPUレンダリングを無効にする：

インターネットオプション>詳細設定>高速グラフィックス> GPUレンダリングの代わりにソフトウェアレンダリングを使用する

そして、それが機能するかどうかを確認します。

1
Mohsenme

IE10をインストールしていませんが、 caniuseit によると mp4はIE9と10でサポートされています です。

次のhtmlはIE9とChromeで動作します。ビデオファイルはサーバーのhtmlページと同じフォルダーにある必要があります（この例の場合）。

<!DOCTYPE html>
<html>
    <body>
        <video src="abc.mp4" width="640" height="480" preload controls></video>
    </body>
</html>

編集：IE10をインストールしましたが、上記の作品もそこで確認できます。

編集：Firefoxはmp4をサポートしておらず、古いブラウザはビデオをネイティブでサポートしていないため、複数のソース（形式）を提供することをお勧めします。通常はFlashプレーヤーにフォールバックします。

<!DOCTYPE html>
<html>
    <body>
        <video width="640" height="480" preload controls>
            <!-- mp4 supported by Chrome & IE9/10 -->
            <source src="abc.mp4" type="video/mp4"></source>
            <!-- webm supported by Firefox -->
            <source src="abc.webm" type="video/webm"></source>

            <!-- last element in video is fall back for native video support, usually a flash player -->
            <object type="application/x-shockwave-flash ...>
                <!-- last element flash player is usual fall back for flash support, usually some "not supported text" -->
                <div>
                Your browser does not natively support flash and you do not have flast installed.
            </div>
            </object>
        </video>
    </body>
</html>
1
Graham King

IE10でhtml5ビデオを再生するときに多くの問題が発生しました。私が最後にチェックしたのは正しい問題でした。ビデオはgzip圧縮されています。サーバーの設定を確認してください!!!

EDIT：ビデオがサーバーによって圧縮されているかどうかを確認するには、たとえば Charles のようなネットワークプロキシスニファを使用します。 IEのデバッガでさえ、ビデオファイル要求への応答ヘッダーをチェックします。もしあなたが見つけたら Content-Encoding:gzip、サーバー設定を確認する必要があります。私の場合、.htaccessファイルのビデオファイルでgzip圧縮を無効にする必要がありました。

0
Armel Larcier

これは私のhtml5ビデオに使用するコードです。

<div>
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="none" width="auto" height="auto"
poster="path/to/image.png"
data-setup='{"example_option":true, "autoplay": true}'>
    <source src="path/to/video.ogv" type='video/ogg' />
    <source src="path/to/video.webm" type='video/webm' />
    <source src="path/to/video.mp4" type='video/mp4' />
    <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
    <object class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["path/to/image.png", {"url": "path/to/video.flv","autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="path/to/image.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
    </object>
</video>

これはすべてのデバイス/ブラウザで機能するはずです。私は最近のブラウザがそれらをより速くロードできるようにするためにその特定の順序でWideosを呼び出しました（クロムはogg/webm/mp4を再生できます-私のビデオのテストからogg/webmはそれらをより速くロードするようですmp4なので、バッファリング時間が短縮されます）

0
mcneela86

私はまったく同じ問題を抱えていました。ビデオの元の解像度は1920x1200でした。 IE10には問題があるようです。低解像度のビデオを使用した最初のテストで問題が解決しました。

0
Nico M