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
}
}