Comment détecter quand un HTML5 <video> élément a fini de jouer ?
C'est le seul événement vidéo "on end" qui fonctionne dans tout l'internet. Bravo !
Réponses
Trop de publicités?
Darkroro
Points
541
Vous pouvez ajouter un écouteur d'événement avec 'ended' comme premier paramètre.
Comme ceci :
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
Jetez un coup d'œil à ceci Tout ce que vous devez savoir sur la vidéo et l'audio HTML5 sur le site Opera Dev, dans la section "Je veux créer mes propres contrôles".
Voici la section pertinente :
<video src="video.ogv">
video not supported
</video>alors vous pouvez utiliser :
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>onended est un événement standard HTML5 sur tous les éléments de média, voir l'élément Événements de l'élément multimédia HTML5 (vidéo/audio) documentation.
J'ai essayé de capturer l'événement "ended" exactement de la même manière, comme vous l'avez présenté, mais cet événement ne se déclenche pas. J'utilise Safari 5.0.4 (6533.20.27).
@All : Vous pouvez aussi le faire comme ceci. <video class="video_player" id="video" poster="images/video-pc.jpg" tabindex="0" height="100%" onended="myHandler()">
d1jhoni1b
Points
1110
JQUERY
$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});HTML
<video id="video1" width="420">
<source src="path/filename.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>Types d'événements Référence DOM HTML Audio et Vidéo
viebel
Points
1990
Documentation très utile avec page de test d'Apple : http://developer.apple.com/library/safari/#samplecode/HTML5VideoEventFlow/Listings/events_js.html#//apple_ref/doc/uid/DTS40010085-events_js-DontLinkElementID_5
Tout ce que vous vouliez savoir sur les événements vidéo HTML5 !
user3758025
Points
11
Voici une approche simple qui se déclenche lorsque la vidéo se termine.
<html>
<body>
<video id="myVideo" controls="controls">
<source src="video.mp4" type="video/mp4">
etc ...
</video>
</body>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', function(e) {
alert('The End');
})
</script>
</html> Dans la ligne "EventListener", remplacez le mot "ended" par "pause" ou "play" pour capturer également ces événements.
0 votes
Documentation très utile avec page de test d'Apple : developer.apple.com/library/safari/#samplecode/ Tout ce que vous vouliez savoir sur les événements vidéo HTML5 !