Click poster frame to start HTML5 video using jQuery

by Thomas Beutel

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”:

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