Detecta cuándo termina un video HTML5

252

¿Cómo detecta cuando un <video>elemento HTML5 ha terminado de reproducirse?

html html5-video

— Brent
fuente

Documentación muy útil con página de prueba de Apple: developer.apple.com/library/safari/#samplecode/… ¡ Todo lo que quería saber sobre eventos de video HTML5!

— viebel

311

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>

— Lothereus
fuente

8

Este es el único evento de video "on-end" que funciona en toda Internet. ¡Bravo!

— Isaac

10

¿Por qué verificas si e existe?

— Allan Stepps

3

@AllanStepps De lo que puedo deducir, la if(!e) { e = window.event; }afirmación de que esta respuesta originalmente incluida es un código específico de IE para obtener el último evento desde un controlador de eventos adjunto attachEventen las primeras versiones de IE. Como en este caso, se está adjuntando el controlador addEventListener(y esas versiones anteriores de IE son irrelevantes para las personas que trabajan con video HTML5), era completamente innecesario y lo he eliminado.

— Mark Amery

3

Un punto a tener en cuenta al usar este método, Safari en la versión El Capitan de OS X (10.11) no capta el evento 'finalizado'. Entonces, en ese caso, necesitaba usar el evento 'timeupdate' y luego verificar cuándo this.current Time era igual a 0 nuevamente.

— Cam

2

También recuerde establecer el bucle en falso, de lo contrario el evento finalizado no se activará.

— Israel Morales

134

Eche un vistazo a esta publicación Todo lo que necesita saber sobre video y audio HTML5 en el sitio de Opera Dev en la sección "Quiero mover 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>

onendedes un evento estándar HTML5 en todos los elementos multimedia, consulte la documentación de eventos de elementos multimedia HTML5 (video / audio) .

— Alastair Pitts
fuente

2

Traté de atrapar el evento "finalizado" exactamente de la misma manera, como lo presentaste, pero este evento no se dispara. Estoy bajo Safari 5.0.4 (6533.20.27)

— AntonAL

@AntonAL: Publicaría esto como una nueva pregunta si tiene problemas.

— Alastair Pitts

@All: también puedes hacerlo así. <video class = "video_player" id = "video" poster = "images / video-pc.jpg" tabindex = "0" height = "100%" onended = "myHandler ()">

— VendettaDroid

55

@AlastairPitts Esto no es válido en Chrome. La respuesta de Darkroro es la única forma en que lo hice funcionar con Chrome. Esto todavía funcionó en Firefox.

— Jeff

Enlaces muertos w3schools.com/tags/ref_eventattributes.asp => Eventos de medios

— Aurelien

36

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

— d1jhoni1b
fuente

11

-1. .on()se ha preferido .bind()desde jQuery 1.7, que se lanzó en 2011. Además, formatee su código correctamente.

— Mark Amery

4

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>

— Oscar_Wroclaski
fuente

4

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' sustituya la palabra 'finalizó' con 'pausa' o 'reproducir' para capturar esos eventos también.

— usuario3758025
fuente

Tiene un error de sintaxis en este código JS. Missing) después de la lista de argumentos

— frzsombor

1

Simplemente puede agregar onended="myFunction()"a su etiqueta de video.

<video onended="myFunction()">
  ...
  Your browser does not support the video tag.
</video>

<script type='text/javascript'>
  function myFunction(){
    console.log("The End.")
  }
</script>

— JC R
fuente

0

Puede agregar al oyente todos los eventos de video, incluyendo ended, loadedmetadata, timeupdatedónde endedse llama la función 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>

Expandir fragmento

— jafarbtech
fuente