Détecter la fin d'une vidéo HTML5

190

Comment pouvez-vous détecter la fin d'un élément HTML5 <video>?Détecter la fin d'une vidéo HTML5

2010-04-29 UltimateBrent

documentation très utile avec la page de test d'Apple: http://developer.apple. com/bibliothèque/safari/# samplecode/HTML5VideoEventFlow/Inscriptions/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! – viebel

219

Vous pouvez ajouter un écouteur d'événement avec 'terminé', comme le 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>

Source

2010-05-21 09:32:15 Darkroro

Il s'agit de la seule vidéo "on end" qui fonctionne sur Internet. Bravo! – Isaac

+10

Pourquoi vérifiez-vous si e existe? –

Fonctionne sur Android Chrome contrairement à 'onended' – Richard

125

Jetez un oeil à ce Everything You Need to Know About HTML5 Video and Audio poster sur le site Opera Dev dans la section "Je veux lancer mes propres contrôles".

Ceci est la section pertinente:

<video src="video.ogv"> 
    video not supported 
</video>

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 multimédias, consultez la documentation HTML5 media element (video/audio) events.

Source

2010-04-30 00:01:27

Ce navigateur est-il spécifique? – UltimateBrent

J'ai mis à jour ma réponse avec plus d'info. –

Merci! Ça devrait le faire! – UltimateBrent

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 HTML Audio and Video DOM Reference

Source

2013-01-13 06:52:19 d1jhoni1b

-1. '.on()' a été préféré à '.bind()' depuis jQuery 1.7, qui a été publié en 2011. Aussi, veuillez formater correctement votre code. –

Voici un exemple complet, j'espère que ça aide =).

<!DOCTYPE html> 
<html> 
<body> 

<video id="myVideo" controls="controls"> 
    <source src="your_video_file.mp4" type="video/mp4"> 
    <source src="your_video_file.mp4" type="video/ogg"> 
    Your browser does not support HTML5 video. 
</video> 

<script type='text/javascript'> 
    document.getElementById('myVideo').addEventListener('ended',myHandler,false); 
    function myHandler(e) { 
     if(!e) { e = window.event; } 
     alert("Video Finished"); 
    } 
</script> 
</body> 
</html>

Source

2014-03-14 08:28:00

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>

En remplaçant la ligne « EventListener » le mot « terminé » par « pause » ou « jouer » pour capturer ces événements aussi bien.

Source

2014-06-19 20:31:01 user3758025

Vous avez une erreur de syntaxe dans ce code JS. Manquant) après la liste des arguments – frzsombor

Vous pouvez ajouter auditeur tous les événements vidéo nicluding ended, loadedmetadata, timeupdate où ended fonction est appelée lorsque la vidéo se termine

$("#myVideo").on("ended", function() { 
 
    //TO DO: Your code goes here... 
 
     alert("Video Finished"); 
 
}); 
 

 
$("#myVideo").on("loadedmetadata", function() { 
 
     alert("Video loaded"); 
 
    this.currentTime = 50;//50 seconds 
 
    //TO DO: Your code goes here... 
 
}); 
 

 

 
$("#myVideo").on("timeupdate", function() { 
 
    var cTime=this.currentTime; 
 
    if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once 
 
     alert("Video played "+cTime+" minutes"); 
 
    //TO DO: Your code goes here... 
 
    var perc=cTime * 100/this.duration; 
 
    if(perc % 10 == 0)//Alerts when every 10% watched 
 
     alert("Video played "+ perc +"%"); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <video id="myVideo" controls="controls"> 
 
    <source src="your_video_file.mp4" type="video/mp4"> 
 
     <source src="your_video_file.mp4" type="video/ogg"> 
 
     Your browser does not support HTML5 video. 
 
    </video> 
 

 
</body> 
 

 
</html>

Source

2016-12-08 19:24:54 jafarbtech

Détecter la fin d'une vidéo HTML5

Répondre

Questions connexes