Détecter quand une vidéo HTML5 finitions

Comment détecter le moment où un HTML5 <video> élément a fini de jouer?

InformationsquelleAutor Brent | 2010-04-29
  1. 275

    Vous pouvez ajouter un écouteur d'événement avec "terminé" comme premier param

    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>
    • C'est la seule vidéo."à la fin de l'événement" qui fonctionne dans l'ensemble de l'internet. Bravo!
    • Pourquoi avez-vous vérifier si e existe?
    • Fonctionne sur Android Chrome contrairement à onended
    • De ce que j'ai pu rassembler, le if(!e) { e = window.event; } déclaration que cette réponse est à l'origine inclus IE code spécifique pour obtenir le dernier événement de l'intérieur d'un gestionnaire d'événement attaché avec attachEvent sur les premières versions de IE. Puisque dans ce cas, le gestionnaire est attachée avec addEventListener (et ces premières versions d'IE ne sont pas pertinentes pour les personnes atteintes d'une vidéo HTML5), il était complètement inutile et je l'ai enlevé.
    • utilisez ceci à l'intérieur myHandler à se référer à la vidéo, si (ce.currentTime == ce.la durée)
    • Un point à noter lors de l'utilisation de cette méthode, Safari sur le El Capitan verson de mac OS X (10.11) ne rattrape pas le "terminé" de l'événement. Donc, dans ce cas, j'avais besoin d'utiliser la "timeupdate' événement, puis vérifier quand cette.le Temps actuel est égal à 0.
    • Aussi n'oubliez pas de régler la boucle de faux, sinon le clos de l'événement ne sera pas déclenché.
    • si e argument n'existe pas, cela signifie que la fonction a été appelée raw, comme myHandler() plutôt que par un élément de vidéo/objet de l'événement. Cette distinction peut être utile.

    InformationsquelleAutor Darkroro
  2. 132

    Jetez un oeil à cette Tout ce que Vous Devez Savoir Sur Audio et Vidéo HTML5 poste à l'Opéra de Dev de site dans le cadre du "je veux rouler ma propre section" commandes de la.

    C'est la section pertinente:

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

    ensuite, vous pouvez utiliser:

    <script>
    var video = document.getElementsByTagName('video')[0];

    video.onended = function(e) {
      /*Do things here!*/
    };
</script>

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

    • C'est que le navigateur spécifique?
    • Je l'ai mise à jour de ma réponse, avec plus d'informations.
    • Merci! Cela devrait le faire!
    • J'ai essayé d'attraper le "fini" de l'événement exactement de la même façon, comme vous l'avez présenté, mais cet événement n'est pas à la cuisson. Je suis sous Safari 5.0.4 (6533.20.27)
    • J'avais poster une nouvelle question si vous rencontrez des problèmes.
    • Vous pouvez le faire de cette façon. <video class="video_player" id="video" affiche="images/video-pc.jpg" tabindex="0" height="100%" onended="myHandler()">
    • Ce n'est pas valable sur Chrome. Darkroro la réponse est la seule façon que je l'ai eu à travailler avec google Chrome. Cette travaillait encore sur Firefox.
    • Liens morts. w3schools.com/tags/ref_eventattributes.asp => Événements Médiatiques
    • C'est le seul qui fonctionne pour moi. L'ajout d'écouteur d'événement "terminé" n'a pas fonctionné.

    InformationsquelleAutor Alastair Pitts
  3. 35

    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 et Vidéo DOM de Référence

    • -1. .on() a été préférés .bind() depuis jQuery 1.7, qui a été publié en 2011. Aussi, veuillez formater votre code correctement.
    InformationsquelleAutor d1jhoni1b
  4. 4

    Voici un exemple complet, j'espère que cela 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>
    InformationsquelleAutor Oscar_Wroclaski
  5. 4

    Ici est 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 le "EventListener' ligne de substituer le mot "terminé" avec "pause" ou "play" pour la capture de ces événements.

    • Vous avez une erreur de syntaxe dans ce code JS. Manquant ) après la liste des arguments
    InformationsquelleAutor user3758025
  6. 0

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

    JS:

    $("#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 +"%");
});

    HTML:

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

    InformationsquelleAutor jafarbtech