Étape 3 : Écouter des événements vidéo

Vous pouvez contrôler le mode de fonctionnement d'une création lorsque la vidéo effectue une action donnée. Par exemple, vous pouvez ajouter une animation à l'issue de la vidéo. Pour cela, écoutez les événements vidéo. Pour en savoir plus, consultez la section Media Events de la page relative aux attributs d'événements HTML5 (en anglais).

Ajouter une animation à l'issue de la vidéo

Utilisez l'événement vidéo ended HTML5 pour déterminer la fin de la vidéo, puis lancer l'animation.

Extrait de code

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

function videoEndHandler(e) {
// La vidéo est terminée, lancer la lecture de l'animation
}

Déterminer à quel moment la vidéo est lue et mise en pause

Utilisez les événements vidéo play et pause HTML5 pour déterminer à quel moment la vidéo est mise en pauses ou lue.

Extrait de code

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

function videoPausePlayHandler(e) {
if (e.type == 'play') {
// La vidéo a été lue, effectuer une action
} else if (e.type == 'pause') {
// La vidéo a été mise en pause, effectuer une action
}
}