locked
HTML5 IE9 MP4 Video Playback RRS feed

  • Question

  • I'm trying to get an MP4 video to playback using IE9. I'm using the HTML5 <video> tag with Flash fallback. Using the Flash fallback, the video plays fine using IE8 or even IE9 using Compatibility View. However, "regular" IE9 will not play the video. Instead, I see the video player controls (using videojs Javascript library for this) and clicking the "play" button shows a white dot in the center of the poster/thumbnail from the video. Manipulating the html5 <video> markup (preload, autoplay, source type, etc) has not changed the results - no video playback. I have been able to play other MP4 video files from the same IE9 browser, such as the one at videojs.com.

    I have encoded the video myself using FFMPEG, converting the original MOV file to MP4. This same MP4 video plays fine in other browsers (Chrome, iPhone iOS Safari), so it is puzzling to me why this does not work using IE9 which I understand is supposed to support this. Searching for clues, I see that most folks with this same sort of issue have solved the problem by ensuring that the MP4 is served with the appropriate MIME/Content-Type - video/mp4. Using IE9's developer tools (F12) I have verified that the video file is indeed sent to the browser with the correct content-type.

    I feel like the problem is either in the HTML5 markup, in the web server configuration, or in how I have encoded the original video. It's possible there is an issue with the Javascript I am using, however I do not see any script errors loading the page.

     

    Below is a link to the video in question and IE9 version information.

     

     IE9 version: 9.0.8112.16421

     Web page with video: http://goo.gl/irBs5

     

    If there is any other information that might be useful, I can try to provide it. Any help or suggestions you might have would be appreciated.

     

    Thanks,

    Harry

     

    Here is what the video looks like after clicking the play button in IE9:


    Friday, August 19, 2011 1:30 AM

Answers

  • Hi Harry,

    You can simply test if the mp4 file works well in IE9 as follow:

    <!DOCTYPE HTML>
    <html>
    <body>
        <video width="320" height="240" controls="controls">
         <source src="https://vivavidi1.blob.core.windows.net/publicfiles/hsauers@gmail.com/SpaceShuttle/SpaceShuttle.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
            Your browser does not support the video tag.
    </video>
    </body>
    </html>


    according http://www.w3schools.com/html5/html5_video.asp says, the video element allows multiple source elements to enable different browser can link to different video. I think that's why firefox and chrome can work, so that only above code can test if mp4 works in IE9.

    when I run markup above, it appear a red cross. I think it's an issue of mp4 file itself, please check if there is some problems when your converting movie files using ffmpeg.

    here is a simlar thread you can refer:

    http://stackoverflow.com/questions/5487085/ffmpeg-covert-html-5-video-not-working

    Hope this helps, thanks.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework
    • Marked as answer by Yanping Wang Friday, August 26, 2011 9:41 AM
    Monday, August 22, 2011 6:16 AM
  • Thanks Yanping!

    I think you are exactly right. I see what you are seeing using the markup you gave me: http://goo.gl/mUtlL

    I think I will have to experiment with the FFMPEG encoding settings to get it right. Yes, that stackoverflow thread looks to be very close to my issue. Thanks.

    If I figure out what's going on, I will repost some details.

     

    Thanks again for your help!

    Harry

    • Marked as answer by Yanping Wang Friday, August 26, 2011 9:41 AM
    Tuesday, August 23, 2011 1:18 AM

All replies

  • Hi Harry,

    You can simply test if the mp4 file works well in IE9 as follow:

    <!DOCTYPE HTML>
    <html>
    <body>
        <video width="320" height="240" controls="controls">
         <source src="https://vivavidi1.blob.core.windows.net/publicfiles/hsauers@gmail.com/SpaceShuttle/SpaceShuttle.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
            Your browser does not support the video tag.
    </video>
    </body>
    </html>


    according http://www.w3schools.com/html5/html5_video.asp says, the video element allows multiple source elements to enable different browser can link to different video. I think that's why firefox and chrome can work, so that only above code can test if mp4 works in IE9.

    when I run markup above, it appear a red cross. I think it's an issue of mp4 file itself, please check if there is some problems when your converting movie files using ffmpeg.

    here is a simlar thread you can refer:

    http://stackoverflow.com/questions/5487085/ffmpeg-covert-html-5-video-not-working

    Hope this helps, thanks.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework
    • Marked as answer by Yanping Wang Friday, August 26, 2011 9:41 AM
    Monday, August 22, 2011 6:16 AM
  • Thanks Yanping!

    I think you are exactly right. I see what you are seeing using the markup you gave me: http://goo.gl/mUtlL

    I think I will have to experiment with the FFMPEG encoding settings to get it right. Yes, that stackoverflow thread looks to be very close to my issue. Thanks.

    If I figure out what's going on, I will repost some details.

     

    Thanks again for your help!

    Harry

    • Marked as answer by Yanping Wang Friday, August 26, 2011 9:41 AM
    Tuesday, August 23, 2011 1:18 AM
  • I am having lots of similar problems with IE 9.  All of the mp4 files that I get from Microsoft and other sources like HTML5 text books play with no problems on IE 9 but I haven't been able to play any avi files which have been converted to mp4 using several different conversion programs that I downloaded from the internet.  None of these converted files will play with the HTML 5 video element but Windows Media Player can play them without problems.  I am beginning to suspect that the conversion programs aren't converting the avi files correctly to mp4.  I would appreciate hearing from anyone who has had similar problems.  Thanks.

    pjlay@msn.com

    Friday, November 16, 2012 5:24 PM
  •  Yanping

    I get this  http://criticalthunk.blogspot.de/2011/08/mp4-test.html   invalid source  IE 11 Windows 8.1

     see this thread other people, problems  and my test results  http://social.msdn.microsoft.com/Forums/ie/en-US/60d3ce12-b79f-407c-bafa-44f26fb16003/error-unsupported-video-type-or-invalid-file-path-when-trying-to-play-mp4?forum=iewebdevelopment

    I tried debugging in IE11 but no errors except invalid source still -- since it's not only my site, but any site using the html5 video tag html code, it must be something IE11 specific..  or something IE11 requires that my windows 8.1 doesn't have installed, i even gave IE11 windows firewall access and disabled all IE11 security no luck

    interestingly,  it plays local files..  disabled all antivirus and malware too..  

    im stuck

    Sunday, October 20, 2013 4:24 PM
  • update,  just updated my windows ie 11 on my windows 7  and video html5 works..  

    also heard MS removed 8.1 update because of issues, and google  is not working on some IE11 -- 

    so my issue is something with windows 8.1 IE11 and something else.. 

    Monday, October 21, 2013 12:19 AM