Antworten:
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>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.
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) .
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
.on()wurde .bind()seit jQuery 1.7, das 2011 veröffentlicht wurde, vorgezogen. Bitte formatieren Sie Ihren Code auch richtig.
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>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.
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>