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 »


2 Comments

  • Joe says:

    Helped me a ton, thanks!

  • DK says:

    How do I know the time at which the video was paused? Let’s assume that that the video is of 10 munutes. The user pauses the video at 6 minutes, 32 seconds; how do I get the pause time information when he pauses it?