Click poster frame to start HTML5 video using jQuery
post-template-default,single,single-post,postid-223,single-format-standard,bridge-core-3.0.1,qodef-qi--no-touch,qi-addons-for-elementor-1.5.3,qode-page-transition-enabled,ajax_updown,page_not_loaded,,vertical_menu_enabled,side_area_uncovered_from_content,qode-theme-ver-28.7,qode-theme-bridge,disabled_footer_top,qode_header_in_grid,wpb-js-composer js-comp-ver-6.8.0,vc_responsive,elementor-default,elementor-kit-6

Click poster frame to start HTML5 video using jQuery

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">

Them to make the poster frame clickable, I used this jQuery snippet:

$('#promovid').click( function(){
$('#video').get(0).play();       // get(0) gets the original DOM element
$('#promovid').unbind('click');  // remove click listener

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).