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(); [...]