23 Mar 2011 Click poster frame to start HTML5 video using jQuery
I needed to have an HTML5 video with a clickable poster frame. The first issue was that Safari would preload the movie, removing the poster frame after a few seconds. I fixed that by setting preload=”none”:
<div id="promovid">
<video id="video" controls="controls" poster="video-poster.jpg" preload="none" width="640" height="480">
...
</div>
Them to make the poster frame clickable, I used this jQuery snippet:
<script>
$(document).ready(function(){
$('#promovid').click( function(){
$('#video').get(0).play(); // get(0) gets the original DOM element
$('#promovid').unbind('click'); // remove click listener
});
</script>
Notice that I remove the click listener after the first click. This viewer can then use the native controls to pause or fullscreen the movie.
Also note the use of get(0) on the $(‘#video’) element. My first inclination was to say $(‘#video’).play(). However, jQuery elements don’t usually expose the methods of the selected DOM element. To access the actual DOM element, I had to use get(0).
References:
http://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery
http://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in-jquery