Erkennen, wann ein HTML5-Video fertig ist

Antworten:

310

Sie können einen Ereignis-Listener mit 'beendet' als erstem Parameter hinzufügen

So was :

<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
quelle
8
Dies ist das einzige Video "on end" -Ereignis, das im gesamten Internet funktioniert. Bravo!
Isaac
10
Warum prüfst du, ob e existiert?
Allan Stepps
3
@AllanStepps Soweit ich das beurteilen kann, ist die if(!e) { e = window.event; }Aussage, dass diese Antwort ursprünglich enthalten war, IE-spezifischer Code zum Abrufen des neuesten Ereignisses aus einem Ereignishandler, der attachEventan frühere Versionen von IE angehängt ist . Da in diesem Fall der Handler angehängt wird addEventListener(und diese frühen Versionen des IE für Benutzer von HTML5-Videos irrelevant sind), war dies völlig unnötig und ich habe ihn entfernt.
Mark Amery
3
Ein Punkt, den Sie bei dieser Methode beachten sollten: Safari auf der El Capitan-Version von OS X (10.11) fängt das "beendete" Ereignis nicht ab. In diesem Fall musste ich das Ereignis 'timeupdate' verwenden und dann überprüfen, wann this.current Time wieder gleich 0 war.
Cam
2
Denken Sie auch daran, die Schleife auf false zu setzen, da sonst das beendete Ereignis nicht ausgelöst wird.
Israel Morales
134

Schauen Sie sich alles an, was Sie über HTML5 Video und Audio wissen müssen Beitrag auf der Opera Dev-Website im Abschnitt "Ich möchte meine eigenen Steuerelemente rollen" an.

Dies ist der relevante Abschnitt:

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

dann können Sie verwenden:

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

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

onendedist ein HTML5-Standardereignis für alle Medienelemente. Weitere Informationen finden Sie in der Dokumentation zu HTML5-Medienelementereignissen (Video / Audio) .

Alastair Pitts
quelle
2
Ich habe versucht, das "beendete" Ereignis genauso zu erfassen, wie Sie es vorgestellt haben, aber dieses Ereignis wird nicht ausgelöst. Ich bin unter Safari 5.0.4 (6533.20.27)
AntonAL
@AntonAL: Ich würde dies als neue Frage posten, wenn Sie Probleme haben.
Alastair Pitts
@All: Du kannst es auch so machen. <video class = "video_player" id = "video" poster = "images / video-pc.jpg" tabindex = "0" height = "100%" onended = "myHandler ()">
VendettaDroid
5
@AlastairPitts Dies gilt nicht für Chrome. Die Antwort von Darkroro ist die einzige Möglichkeit, mit Chrome zu arbeiten. Dies funktionierte immer noch unter Firefox.
Jeff
Tote Links. w3schools.com/tags/ref_eventattributes.asp => Medienereignisse
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>

Ereignistypen HTML Audio- und Video-DOM-Referenz

d1jhoni1b
quelle
11
-1. .on()wurde .bind()seit jQuery 1.7, das 2011 veröffentlicht wurde, vorgezogen. Bitte formatieren Sie Ihren Code auch richtig.
Mark Amery
4

Hier ist ein vollständiges Beispiel, ich hoffe es hilft =).

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

Hier ist ein einfacher Ansatz, der ausgelöst wird, wenn das Video endet. 

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

Ersetzen Sie in der Zeile "EventListener" das Wort "beendet" durch "Pause" oder "Wiedergabe", um auch diese Ereignisse zu erfassen.

user3758025
quelle
In diesem JS-Code ist ein Syntaxfehler aufgetreten. Vermisst) nach Argumentliste
frzsombor
1

Sie können einfach onended="myFunction()"zu Ihrem Video-Tag hinzufügen .

<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.
quelle
0

Sie können dem Listener alle Videoereignisse hinzufügen, einschließlich der Funktion, ended, loadedmetadata, timeupdatebei der die endedFunktion aufgerufen wird, wenn das Video endet

$("#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>
Erweitern Sie das Snippet

jafarbtech
quelle