web-dev-qa-db-de.com

Ausführen der Funktion am Ende des HTML5-Videos

Ich habe ein HTML-Video und möchte eine Funktion ausführen, wenn ein Video endet. Ich habe folgendes versucht, bekomme aber nichts:

$(document).ready(function(){

    $('video').live('ended',function(){

        alert('video ended');

    });

});

Irgendwelche Ideen, warum dies nicht am Ende eines Videos ausgelöst wird? Oder habe ich nicht genug Informationen angegeben, um hier etwas zu beantworten?

Hinweis: Ich verwende die Funktion live () und nicht on (), da für dieses Projekt jQuery 1.7 erforderlich ist.

jqueryhtml5html5-video
28
willdanceforfun

Für Ihr Paste & Copy Vergnügen die jQuery-Lösung:

<video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>/*<![CDATA[*/
  $(document).ready(function(){
    $('video').on('ended',function(){
      console.log('Video has ended!');
    });
  });
/*]]>*/</script>

Ersetzen Sie den 'video'- Teil durch den richtigen Wahlschalter für Ihr Video.

EDIT: Hier ist die Lösung ohne jQuery:

<video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>
<script>/*<![CDATA[*/
  document.querySelector('video').addEventListener('ended',function(){
    console.log('Video has ended!');
  }, false);
/*]]>*/</script>

Ersetzen Sie den 'video'- Teil durch den richtigen Wahlschalter für Ihr Video.

54
fboes
<html>
<head>
    <title></title>

    <script>
function videoEnded() {
    alert('video ended');
}


    </script>
</head>
<body>

<video src="video/endscene.mp4" id="video" controls onended="videoEnded()">
    video not supported
</video>
</body>
</html>
12
Ilya Libin

verwenden Sie das Ereignis onended

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

video.onended = function(e) {
  alert('video ended');
}

Lesen Sie mehr über Alles, was Sie über HTML5-Video und -Audio wissen müssen

6
Dipak

Hier können Sie etwas ausprobieren:

$(document).on('ended', 'video', function (e) {
    alert('video ended');
});

Sie sagten, dass das Video dynamisch eingefügt wird nach dem Das DOM wird geladen. In diesem Skript suchen Sie in DOM nach dem video-Element und binden es mit der ended-Funktion.

Hier ist die Dokumentation für .on () .
Hier ist die SO - Frage für dynamische Elemente .

Ich hoffe das hilft!

4
Jason Cidras

die einzige Möglichkeit, wie ich es geschafft habe, ist der folgende Code:

$('video')[0].on('ended',function(){
    console.log('Video has ended!');
});
4
Yonatan R

Sie können am Ort des Lebens weiter verwenden. Da die On-Methode von jquery unterstützt wird, werden neue Versionen und Live in neuen Versionen nicht mehr unterstützt.

Sie können Ihren Code dazu ersetzen und Ihr Problem wird gelöst.

$(document).ready(function(){

$('video').on('ended',function(){

    alert('video ended');

});

});

1
Tahir Afridi