HTML5 video build guide: Standard video module
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.
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.
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
}
}Was this helpful?
How can we improve it?