Detect HTML 5 video play & pause with jQuery

01 May, 2014 by Tom Elliott

Here’s a handy bit of jQuery code that detects when a HTML 5 video’s play button has been pressed. I recently used this when I needed to fade out a video caption overlay once the video had started playing. This has been tested in all major HTML 5 video supported browsers including IE 9, Chrome and FireFox.

var videocontainer = '#video-clip';

$(videocontainer).on('play', function() {
  //Actions when video play selected
  $('#video-caption').fadeOut(400);
});

The code uses a simple ‘on play’ event listener and requires an ID to be assigned to the HTML ‘video’ tag.

To detect when a HTML 5 video pause button is selected, we can use the following which just replaces ‘play’ with ‘pause’ in the event handler.

$(videocontainer).on('pause', function() {
  //Actions when video pause selected
  $('#video-caption').fadeIn(400);
});


Changing HTML 5 video with JavaScript or jQuery »


Leave a Reply

Your email address will not be published. Required fields are marked *

css.php