Step 3: Listen for video events

You can control how a creative functions when the video performs a certain action. For example, you can add animation when the video ends. You do this by listening for video events. For more information, see the Media Events section of HTML5 Event Attributes.

Add animation after video ends

Use HTML5's video ended event to determine when the video ends, then start playing the animation.

Code snippet

video1.addEventListener('ended', videoEndHandler, false);

function videoEndHandler(e) {
// Video has ended, start playing animation
}

Find out when the video is played and paused

Use HTML5’s video play and pause events to determine when the video is paused or played.

Code snippet

video1.addEventListener('play', videoPausePlayHandler, false);
video1.addEventListener('pause', videoPausePlayHandler, false);

function videoPausePlayHandler(e) {
if (e.type == 'play') {
// Video has played, perform an action
} else if (e.type == 'pause') {
// Video has paused, perform an action
}
}