reproducir - Detectar cuando termina un video HTML5
video html5 autoplay (6)
Aquí hay un ejemplo completo, espero que ayude =).
<!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>
¿Cómo detectas cuando un elemento <video> HTML5 ha terminado de reproducirse?
Aquí hay un enfoque simple que se activa cuando finaliza el video.
<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>
En la línea ''EventListener'' sustituye la palabra ''fin'' con ''pause'' o ''play'' para capturar esos eventos también.
Eche un vistazo a todo lo que necesita saber acerca de la publicación de video y audio HTML5 en el sitio de Opera Dev en la sección "Quiero pasar mis propios controles".
Esta es la sección pertinente:
<video src="video.ogv">
video not supported
</video>
entonces puedes usar:
<script>
var video = document.getElementsByTagName(''video'')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>
onended es un evento estándar de HTML5 en todos los elementos de medios, consulte la documentación de eventos de elementos de medios de HTML5 (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>
Tipos de eventos HTML Audio y Video DOM Referencia
Puede agregar a la lista de escucha todos los eventos de video, incluidos los datos ended, loadedmetadata, timeupdate que se llama la función ended cuando finaliza el video
$("#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>
Puede agregar un detector de eventos con ''finalizado'' como primer parámetro
Me gusta esto :
<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>