Odpowiedzi:
Możesz dodać detektor zdarzeń z „zakończonym” jako pierwszym parametrem
Lubię to :
<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; }stwierdzenie, że pierwotnie zawierała tę odpowiedź, jest specyficznym dla IE kodem do pobierania najnowszego zdarzenia z modułu obsługi zdarzeń dołączonego do attachEventwczesnych wersji IE. Ponieważ w tym przypadku program obsługi jest dołączony addEventListener(a te wczesne wersje IE nie mają znaczenia dla osób zajmujących się wideo HTML5), było to całkowicie niepotrzebne i usunąłem go.
Zapoznaj się z tym artykułem Wszystko, co musisz wiedzieć o HTML5, wideo i audio w witrynie Opera Dev w sekcji „Chcę wprowadzić własne elementy sterujące”.
To jest odpowiedni rozdział:
<video src="video.ogv">
video not supported
</video>wtedy możesz użyć:
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>onendedto standardowe zdarzenie HTML5 na wszystkich elementach multimedialnych, zobacz dokumentację zdarzeń elementu multimedialnego HTML5 (wideo / 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>Typy zdarzeń HTML Audio i wideo Dokumentacja DOM
.on()jest preferowany .bind()od jQuery 1.7, który został wydany w 2011 roku. Również proszę poprawnie sformatować kod.
Oto pełny przykład, mam nadzieję, że to pomoże =).
<!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>Oto proste podejście, które uruchamia się po zakończeniu filmu.
<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> W wierszu „EventListener” zamień słowo „zakończone” na „pauza” lub „zagraj”, aby uchwycić również te zdarzenia.
Możesz dodać detektor do wszystkich zdarzeń wideo, niezależnie od tego, ended, loadedmetadata, timeupdategdzie endedfunkcja jest wywoływana po zakończeniu wideo
$("#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>