Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML5 <video> tag won't work in IE10!

    This is my code, down to the basics. It works fine in Chrome and Firefox (using .webm instead of .mp4).

    <body>
    <video width="300px" src="../resources/videos/RosPix.mp4" >
    </video>
    </body>


    Internet Explorer displays nothing?

    If I add the controls attribute,

    <video width="300px" src="../resources/videos/RosPix.mp4" controls>

    I get an error message: "Invalid Source" (The .mp4 file plays just fine in Windows Media Player, so the file is not corrupt.)

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    You need to supply the video in three different formats for it to work across most browsers currently.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not worried about Opera and Safari at the moment. That will come later.

    Firefox and Chrome are working fine with .webm

    IE is my problem at the moment. It is supposed to support .mp4, so why doesn't it detect (and display) the file?

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    To correctly code a video tag you need all of the following:

    Code:
    <video  width="300" height="200" poster="movie.jpg" controls>
            <source src='movie.mp4'
    type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
            <source src='movie.webm'
    type='video/webm; codecs="vp8.0, vorbis"'>
            <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'>
            <object data="flashmovie.swf" width="300" height="200" type="application/x-shockwave-flash">
                  <param name="src" value="flashmovie.swf">
                  <param name="quality" value="high">
                  <param name="bgcolor" value="#FFFFFF">
                  <param name="wmode" value="transparent">
                  <param name="pluginurl"
    value="http://www.macromedia.com/go/getflashplayer">
    <p>Fallback content for browsers that don't support either video or flash goes here.</p>
            </object> 
    </video>
    The code in your original post only shows a .mp4 file and not a .webm file - the above code shows how to correctly combine them together with the .ogv file that is the third format you need to reference.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks.

    I left everything out of the code example just to help focus the question on IE/mp4, since everything else is working okay. I'm not sure I understand why IE needs to see the webm and Flash code, but I'll try putting it all together as you suggest to see if it makes IE happier.

    More later.

  • #6
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Essentially no change, except that I put in a poster image per your code example. I did not create a Flash movie. Does it really have to be there for IE to detect the mp4??

    If you're not ready to give up on this (hope not), here's the page:
    andersonhumane.org/UnderConstruction/adopt/adoptadog.html

    Side question: Your code shows the <p> fallback code inside the object tag. That seems odd to me. Is it correct, or might it be a typo?

    Many thanks.

  • #7
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fixed!

    I had converted the original .MOV file to .mp4 not using the H264 compression format (who woulda thought?). I found a comment elsewhere that that is required. Fortunately my conversion software could do that.

    Now IE is working fine.

    Thanks to this board for keeping me working at the problem.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •