web-dev-qa-db-fra.com

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

Comment détecter si un élément HTML5 <video> a fini de jouer?

html5html5-video
232
Brent

Vous pouvez ajouter un écouteur d'événement 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>
280
Darkroro

Jetez un coup d'œil à ceci Tout ce que vous devez savoir sur la vidéo et l'audio HTML5 postez sur le Opera Site de développement dans la section "Je veux lancer 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 multimédias, voir la documentation éléments multimédia HTML5 (vidéo/audio) .

132
Alastair Pitts

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énement Référence HTML audio et vidéo DOM

35
d1jhoni1b

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 "play" pour capturer également ces événements.

4
user3758025

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

Vous pouvez simplement ajouter onended="myFunction()" à votre balise video.

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

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

Vous pouvez ajouter un programme d'écoute à tous les événements vidéo, notamment ended, loadedmetadata, timeupdate où la fonction ended 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>
0
jafarbtech