Ausführen von Funktion am Ende von html5 Video

Ich habe ein HTML-Video, und ich möchte eine Funktion ausführen, wenn ein Video endet. Ich habe folgendes ausprobiert, aber ich bekomme nichts:Ausführen von Funktion am Ende von html5 Video

Irgendwelche Ideen, warum dies nicht am Ende eines Videos auslöst? Oder habe ich nicht genug Informationen zur Verfügung gestellt, um hier etwas zu beantworten?

Hinweis: Ich benutze live() -Funktion und nicht on() wegen der Notwendigkeit für jQuery 1.7 mit diesem Projekt.

Quelle

2013-01-25 willdanceforfun

.on in jquery Version 1.7 hinzugefügt wurde. .Live wurde in 1.7. – ryadavilli

veraltet @ryadavilli ja, aber nach meinem Wissen funktioniert live() immer noch in 1.7 nicht wahr? – willdanceforfun

Ja, es sollte, es war veraltet und nicht bis 1.9 entfernt. Mein Kommentar war, dass Sie immer noch .on verwenden könnten. wie es in 1.7 selbst hinzugefügt wurde. – ryadavilli

Verwendung onended Ereignis

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

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

Lesen Sie mehr auf Everything you need to know about HTML5 video and audio

Quelle

2013-01-25 08:02:39 Dipak

Das sieht gut aus. Etwas, das ich nicht erwähnt habe, ist, dass das Video nach dem Laden der Seite in das Dom geladen wird, weshalb ich live ('ended') benutze. Ich bin mir nicht sicher ob ich dann deine Funktion so nutzen kann wie es ist. – willdanceforfun

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

Quelle

2013-05-25 23:01:53

Danke lya Libin – Patel

Es funktioniert, danke – sradha

Für Ihre Paste & Kopie 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 mit dem richtigen Selektor für Ihr Video.

EDIT: Hier ist die Lösung ohne jQuery:

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

Quelle

2014-07-10 10:32:57 fboes

Hier etwas ist, können Sie versuchen:

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

sagte Sie, dass das Video dynamisch eingefügt wird nach das DOM geladen ist. In diesem Skript suchen Sie nach DOM für das Element video und binden es an die Funktion ended.

Hier ist die Dokumentation für .on().
Hier ist die Frage SO für dynamic items.

Ich hoffe, das hilft!

Quelle

2016-03-10 14:02:34

Sie können am Ort des Lebens verwenden. Da die Methode von jQuery unterstützt wird, werden neue Versionen und Live in neuen Versionen veraltet.

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

$(document).ready(function(){ 

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

    alert('video ended'); 

});

});

Quelle

2016-09-22 07:24:22

die einzige Art, wie ich es geschafft, zu arbeiten, ist der folgende Code:

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

Quelle

2016-10-31 08:07:21

Ausführen von Funktion am Ende von html5 Video

Antwort

Verwandte Themen