How do I get a HTML5 Video to work using IE10

问题

I am hoping someone has an idea on what I can do to help me play HTML5 videos on my local intranet.

My Web server= Windows Server 2008 R2 Standard 64bit IIS version= IIS7

Test User environment = Windows 7 Enterprise

Video plays perfectly using 'Google Chrome'

Video fails to play using 'IE10'

My html code is as follows:

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

My test machine using IE10 does play HTML5Rocks video 'http://craftymind.com/factory/html5video/CanvasVideo.html'

Regards,

Chris

回答1:

Make sure you set the web server to use a MIME type video/mp4 for .mp4. I accidentally set .mp4 to use MIME type video/mpeg, the video plays in Chrome, but not in IE11.

Also you need to make sure the video uses H264 video codec and AAC audio codec

回答2:

I just had a similar problem, my own site HTML5 did not work at all. No error message just blank.

The reason was Windows7 N (EU - no media player).

After installing the Windows Media Player, this (and also other problems) are fixed. I hope it helps :)

回答3:

It doesn't look like it works in Win7+IE10 for some reason. Everything else looks good. Tested against the following pages, which includes ie.microsoft.com test.

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

Win7 IE9 – OK

Win7 IE10 – nope

Win8 IE10 – OK

Win7 IE11 – OK

Win8 IE11 – OK

BrowserStack screenshots for the MS test page. http://www.browserstack.com/screenshots/9083c865675d0821ee8b1030a43da5fd36bff469

回答4:

I don't have IE10 installed, however, according to caniuseit, mp4 is supported in IE9 and 10.

The following html works for me in IE9 & Chrome, note your video file must be in the same folder as your html page on the server (in this example).

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

Edit: I have installed IE10 and can confirm the above works there too.

Edit: Since Firefox does not support mp4, and older browsers do not support video natively at all, it is better to provide multiple sources (formats), and fall back, usually to a flash player.

<!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>

回答5:

Maybe you have video card driver problem as mentioned in Cannot play neither IE10 HTML5 video nor Modern UI apps video.

Disable GPU rendering in IE as:

Internet Options > Advanced > Accelerated graphics > Use software rendering instead of GPU rendering

And see if it works.

回答6:

I have had a lot of problems with IE10 playing html5 video. The last thing I checked was the right oe : videos were gzip compressed. Check your server config!!!

EDIT : To know if your videos are getting compressed by the server, use a network proxy sniffer like Charles for example, or even IE's debugger and check the response header to the video file request. If you find Content-Encoding:gzip, then you should check your server config. In my case I had to disable gzip compression on video files in my .htaccess file.

回答7:

This is the code I use for my html5 videos:

<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>

This should work on all devices/browsers. I have called the wideos in that specific order to allow modern browsers to load them faster (chrome can play ogg/webm/mp4 - from testing my videos ogg/webm seem to load faster them mp4 so it will reduce buffering times)

回答8:

I've had the exact same problem. My original resolution of the video was 1920x1200. Seems that IE10 has problems with that. First tests with lower resolution videos solved the problem.

来源：https://stackoverflow.com/questions/15639444/how-do-i-get-a-html5-video-to-work-using-ie10

标签

windows-7

iis-7

html5-video

windows-server-2008-r2

internet-explorer-10