How do I get a HTML5 Video to work using IE10

Asked 26/3, 2013 at 14:21 Answered 22/2, 2015 at 16:25

windows-7 iis-7 html5-video windows-server-2008-r2 internet-explorer-10

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

Peag answered 26/3, 2013 at 14:21 Comment(1)

When you say "fails to play" do you get an error? – Saskatchewan 26/3, 2013 at 14:26

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

Arreola answered 15/7, 2014 at 1:22 Comment(1)

I had a video (uploaded to Amazon S3) which had the wrong MIME type (application/octet-stream). IE10 was the only browser that refused to play it. After changing the MIME type to video/mp4 (it was an mp4 video, obviously) IE10 started playing it. – Aidoneus 12/11, 2014 at 11:35

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

Brenneman answered 28/7, 2013 at 20:3 Comment(2)

You, sir, are my GOD! I've been struggling for days on this and your answer fixed my issue. One question: how in the name of all that is binary, did you figure this out? – Noneffective 21/8, 2013 at 4:44

that's a horrible solution :-/ do you have a popup telling your end users to install WMP? – Commutual 7/8, 2015 at 20:45

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

Jidda answered 12/2, 2014 at 18:41 Comment(0)

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>

Saskatchewan answered 26/3, 2013 at 14:38 Comment(8)

GrayKing, thank you for trying to help. Sorry this took so long to get back to you... I was expecting an email notification if there was a reply to this thread. The video loads up great with Chrome so the path looks good to the MP4. I found a machine that has IE9 and I found it has the same white page (no errors noted) as it does with IE10. – Peag 29/3, 2013 at 20:45

I put the website/page on another Windows server; this one is a 32bit server, same results. Eventually I plan to add fallback like you suggest but I would like it to work with IE10/IE9 first. Actually I probably will use JWPlayer eventually. The HTML5 video test is my way of trying to find out why JWplayer doesn't play correctly. It falls back to the flash player in IE10 but only plays the audio and when clicked on Full screen mode the Video finally plays. Full screen mode is playing in Flash mode too. I hope I this makes since. – Peag 29/3, 2013 at 20:48

Sounds like it might be an issue with a badly encoded mp4 file. Do you get the same behavior with a different file? – Saskatchewan 30/3, 2013 at 9:21

I have tried a couple of files; I sent one file to 'JWPLayer' support and it played fine in IE10 using their player when served from their server (which is not IIS) Seems like it has to be an IIS setting that is blocking HTML5 video but I can't figure out what it might be. – Peag 1/4, 2013 at 14:31

Oh, have you added "video/mp4" as a mime type to the site in IIS? It's not there by default. – Saskatchewan 1/4, 2013 at 18:1

I have added file name extension: '.mp4' MIME type: video/mpeg. I think that is correct? And it does play with Chrome – Peag 1/4, 2013 at 19:38

Without testing it's difficult to say but I know I have mine set to video/mp4. Also stated here forums.asp.net/t/1470612.aspx/1 & here weblogs.asp.net/jeffwids/archive/2011/02/17/…. the second link says explicitly that video/mp4 is correct. It's possible chrome can detect and handle incorrect mime types and ie cannot. – Saskatchewan 2/4, 2013 at 6:37

GrayKing, Sorry I didn't respond to you before now. Thanks for checking that the mine type ="video/mp4" is correct. I will update this thread if I happen on a solution. Regards, Chris – Peag 8/4, 2013 at 18:15

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.

Metatarsal answered 28/7, 2013 at 22:36 Comment(0)

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.

Diagram answered 6/6, 2013 at 11:50 Comment(1)

I am having similar problem, can you give me more info? What should I check on the server? – Insurgent 11/7, 2013 at 14:47

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)

Kenishakenison answered 4/4, 2014 at 1:5 Comment(0)

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.

Headband answered 22/2, 2015 at 16:25 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags