Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

html5 video not working in safari?

Discussion in 'Website Design Forum:' started by wwl777, Jan 6, 2011.

  1. wwl777

    wwl777 Junior Member

    I'm trying to embed a video and making it work safari using a .mp4 file (should also apply to iphone and ie9). This is my code:

    <video  width="320" height="240"  controls preload="none">    <source src="video/ingebruikname_orgel_handbrake.mp4">    <source src="video/ingebruikname_orgel_firefogg.ogv" type='video/ogg codecs="theora, vorbis"'>        No browser support message..</video>
    Now in Firefox, Opera and Chrome it's working (after adding video type support in .htaccess). In Safari it's just giving the no support message. I've also tried adding the type code type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' , but it didn't matter.

    Any ideas here?
  2. Levi

    Levi Moderator Staff Member

    wrong type of mp4 maybe

    iirc safari only supports baseline h264 so you may have the wrong encoding settings.

    And where's the love for webM from google as that covers chrome, opera and firefox, and I think ie8/9 with a codec being installed :)
  3. wwl777

    wwl777 Junior Member

    I followed the tut here and followed every step on how to make the .mp4 file. So I have no idea what could be wrong about the file itself. I've also tried different software (Miro Video Converter) without success.
  4. Levi

    Levi Moderator Staff Member

    is it uploaded?
    if it is stick a link (if you can) and I'll take a look on my end to see if it's just your pc being funny
  5. wwl777

    wwl777 Junior Member

    This is the page: link . It is a video of some organ music.
  6. Levi

    Levi Moderator Staff Member

    well I get a video player loading etc on my safari, looks very much like quicktime without the save options.
  7. wwl777

    wwl777 Junior Member

    Thanks for the try. I'm using Safari 5.0.3 and wasn't getting a video player showing up.

    After trying embed code it said Missing Plug-in and that I need quicktime to play the file. After installing quicktime it worked. To be honest I just never use Safari for other purposes than testing browser compatibility. Glad to know it is working. Kind of sad though that i didn't get the missing plug-in message with the html5 video tag.
  8. wwl777

    wwl777 Junior Member

    I will think I'll make a webm format too :p I was just getting stuck after the mp4 , because it didn't seem to work. I found a nice list on wiki of browsers and their support for video formats
    It says firefox is only supported on FF4 and it's also still experimental. You were right about the IE codec, it says in the note "Possible if the user has installed a VP8 codec on Windows for the IE9."
  9. richimgd

    richimgd Member

    HTML5 video is such a pain in ass! I normally include an iphone friendly h264 version (using handbreak to encode) and then either an ogg or webm version using the 'Make Web Video' extension for firefox. Before all this though I create a nice flash video interface and have that as the primary content, with the html5 video(s) as fallback.
  10. Levi

    Levi Moderator Staff Member

    got a link to that extension as google chrome is dropping h264 support (can understand why too) so that little extension might be handy :)
  11. richimgd

    richimgd Member

    Yea I think its a good and bold move by Google dropping h264. I know its used a lot but with it not being a true open format its not the way forward for the web imo.
  12. Yokocapolo

    Yokocapolo Junior Member

    Safari uses .mp4 format, I had this same problem, just managed to fix it just now. You need to reconvert your mp4 files into mp4 files using Miro Video Converter. (sounds pointless i know) turns out when Miro converts it into the same format the reads "filename.mp4.mp4" all you need to do remove the first "mp4" and rename the file, in your case you could chance it to "ingebruikname_orgel_handbrake2" so the whole file name including extension is "ingebruikname_orgel_handbrake2.mp4". All you need to do now is chance the source within the video tag in your HTML page and your upload the new .mp4 file and the changes to your HTML page and your done.

    Plus I found some browsers do not play the video unless the codec is placed within the 'type' attribute, the codec for the mp4 format is

    type='video/mp4; codecs="h.264, aac"'


Share This Page