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

Safari displaying poster but not video...

Discussion in 'Website Design Forum:' started by voltronik, Nov 14, 2011.

  1. voltronik

    voltronik Junior Member

    Have a strange problem when embedding HTML5 video.
    When i use the poster attribute, Safari (5.1 on Mac OS X 10.7.2) only loads the poster and doesn't load the movie but if i remove the poster attribute, it plays the movie fine.
    Chrome however, plays it perfectly with or without the poster attribute.

    I put the poster attribute in because Firefox should default to the fallback img but doesn't. It only falls back to the poster if the poster attribute is present.

    My code looks like this:

    HTML:
    <div id="video">
            <video autoplay="autoplay" poster="<?php echo get_template_directory_uri(); ?>/library/images/qt-small.jpg" width="890" height="335">
                    <source src="<?php echo get_template_directory_uri(); ?>/library/video/qt-small.mov" type="video/mp4">
                    <img src="<?php echo get_template_directory_uri(); ?>/library/images/qt-small.jpg" width="890" height="335" alt="qt-small" title="No video playback capabilities.">
            </video>
    </div>
    The snippets of PHP are pulling the template directory from Wordpress btw.
    I'm only including a mov file for the mo and will add an ogg file for Firefox and Opera when i have this bit sorted.

    Does anyone know what might going on here? Why is so much not working?
    Any help would be much appreciated!

    Thanks,
    -Jack
     
  2. Jazajay

    Jazajay Active Member

    Sorry not that helpful of a post.
    Due to not being able to use HTML 5 as we can't really use it on a day to day basis yet, due to mainly using CMS systems, I'm curious to the answer myself, so want to get notifications, sorry if this is a bit of a naff reply. :)
     
  3. voltronik

    voltronik Junior Member

    Hi Jazajay,

    Was a bit confused by your reply. Was it your post that wasn't helpful or mine?

    I ended up fixing the issue myself in the end (after another shot at it, i seemed to crack it).
    It looks like the poster attribute is a bit flaky and needs some work.

    Here's what i did:

    HTML:
    <div id="video">
            <video autoplay="autoplay" width="890" height="335">
                    <source src="<?php echo get_template_directory_uri(); ?>/library/video/qt-small.mp4" type="video/mp4">
                    <source src="<?php echo get_template_directory_uri(); ?>/library/video/qt-small.webm" type="video/webm">
                    <source src="<?php echo get_template_directory_uri(); ?>/library/video/qt-small.ogv" type="video/ogg">
                    <img alt="qt-small" src="<?php echo get_template_directory_uri(); ?>/library/images/qt-small.jpg" width="890" height="335" title="No video playback capabilities.">
            </video>
    </div>
    
    Works well in Safari, Chrome, Firefox, Opera and IE9.
     

Share This Page