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

Réponses:

311

Vous pouvez ajouter un écouteur d'événements avec "terminé" comme premier paramètre

Comme ça :

<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>
Lothereus
la source
8
Il s'agit du seul événement vidéo "on end" qui fonctionne sur Internet. Bravo!
Isaac
10
Pourquoi vérifiez-vous si e existe?
Allan Stepps
3
@AllanStepps D'après ce que je peux en déduire, la if(!e) { e = window.event; }déclaration que cette réponse incluait à l'origine un code spécifique à IE pour obtenir le dernier événement à partir d'un gestionnaire d'événements attaché avec attachEventles premières versions d'IE. Étant donné que dans ce cas, le gestionnaire est attaché à addEventListener(et ces premières versions d'IE ne sont pas pertinentes pour les personnes traitant de la vidéo HTML5), il était complètement inutile et je l'ai supprimé.
Mark Amery
3
Un point à noter lors de l'utilisation de cette méthode, Safari sur la version El Capitan d'OS X (10.11) n'attrape pas l'événement «terminé». Donc, dans ce cas, je devais utiliser l'événement «timeupdate», puis vérifier quand this.current Time était à nouveau égal à 0.
Cam
2
N'oubliez pas de définir la boucle sur false, sinon l'événement terminé ne sera pas déclenché.
Israel Morales
134

Jetez un œil à ce que vous devez savoir sur la vidéo et l'audio HTML5 sur le site Opera Dev dans la section "Je veux utiliser mes propres contrôles".

Ceci est 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>

onendedest un événement standard HTML5 sur tous les éléments multimédias, voir la documentation des événements de l'élément multimédia HTML5 (vidéo / audio) .

Alastair Pitts
la source
2
J'ai essayé d'attraper l'événement "terminé" exactement de la même manière que vous l'avez présenté, mais cet événement ne se déclenche pas. Je suis sous Safari 5.0.4 (6533.20.27)
AntonAL
@AntonAL: Je publierais ceci comme une nouvelle question si vous rencontrez des problèmes.
Alastair Pitts
@All: Vous pouvez aussi le faire comme ça. <video class = "video_player" id = "video" poster = "images / video-pc.jpg" tabindex = "0" height = "100%" onended = "myHandler ()">
VendettaDroid
5
@AlastairPitts Ce n'est pas valide sur Chrome. La réponse de Darkroro est le seul moyen de le faire fonctionner avec Chrome. Cela fonctionnait toujours sur Firefox.
Jeff
Liens morts. w3schools.com/tags/ref_eventattributes.asp => Evénements médias
Aurelien
36

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 HTML et audio DOM DOM

d1jhoni1b
la source
11
-1. .on()a été préféré à .bind()jQuery 1.7, sorti en 2011. De plus, veuillez formater votre code correctement.
Mark Amery
4

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>
Oscar_Wroclaski
la source
4

Voici une approche simple qui se déclenche à la fin de la vidéo. 

<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 «terminé» par «pause» ou «lecture» pour capturer également ces événements.

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

Vous pouvez simplement ajouter onended="myFunction()"à votre balise vidéo.

<video onended="myFunction()">
  ...
  Your browser does not support the video tag.
</video>

<script type='text/javascript'>
  function myFunction(){
    console.log("The End.")
  }
</script>
JC R
la source
0

Vous pouvez ajouter un écouteur à tous les événements vidéo, y compris ended, loadedmetadata, timeupdateoù la endedfonction est appelée à la fin de la vidéo

$("#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>
Développer l'extrait

jafarbtech
la source