Safari displaying poster but not video...

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
 
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. :)
 
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.
 
Back
Top