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 »
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?
Helped me a ton, thanks!