Detectar quando um vídeo HTML5 termina

252

Como você detecta quando um <video>elemento HTML5 termina a reprodução?

html html5-video

— Brent
fonte

Documentação muito útil com a página de teste da Apple: developer.apple.com/library/safari/#samplecode/… Tudo o que você queria saber sobre os eventos de vídeo HTML5!

— viebel

311

Você pode adicionar um ouvinte de evento com 'finalizado' como primeiro parâmetro

Como isso :

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

8

Este é o único evento "on end" que funciona em toda a Internet. Bravo!

— Isaac

10

Por que você verifica se e existe?

— Allan Stepps

3

@AllanStepps Pelo que pude reunir, a if(!e) { e = window.event; }declaração de que essa resposta originalmente incluía é o código específico do IE para obter o evento mais recente de um manipulador de eventos associado attachEventàs versões anteriores do IE. Como nesse caso, o manipulador está sendo anexado addEventListener(e essas versões anteriores do IE são irrelevantes para as pessoas que lidam com vídeo HTML5), era completamente desnecessário e eu o removi.

— Mark Amery

3

Um ponto a ser observado ao usar esse método, o Safari no El Capitan verson do OS X (10.11) não captura o evento 'finalizado'. Portanto, nesse caso, eu precisava usar o evento 'timeupdate' e verificar se this.current Time era igual a 0 novamente.

— Cam

2

Lembre-se também de definir loop como false, caso contrário, o evento finalizado não será acionado.

— Israel Morales

134

Dê uma olhada nesta postagem Tudo o que você precisa saber sobre vídeo e áudio em HTML5 no site Opera Dev, na seção "Eu quero rolar meus próprios controles".

Esta é a seção pertinente:

<video src="video.ogv">
     video not supported
</video>

então você pode usar:

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

    video.onended = function(e) {
      /*Do things here!*/
    };
</script>

onendedé um evento padrão HTML5 em todos os elementos de mídia, consulte a documentação de eventos do elemento de mídia HTML5 (vídeo / áudio) .

— Alastair Pitts
fonte

2

Tentei pegar o evento "finalizado" exatamente da mesma maneira que você apresentou, mas esse evento não está sendo disparado. Estou sob o Safari 5.0.4 (6533.20.27)

— AntonAL

@AnALAL: Eu postaria isso como uma nova pergunta, se você estiver tendo problemas.

— Alastair Pitts

@All: Você pode fazer assim também. <video class = "video_player" id = "video" poster = "images / video-pc.jpg" tabindex = "0" height = "100%" recomendado = "myHandler ()">

— VendettaDroid

5

@AlastairPitts Isso não é válido no Chrome. A resposta de Darkroro é a única maneira de fazê-lo funcionar com o Chrome. Isso ainda funcionou no Firefox.

— Jeff

Links mortos. w3schools.com/tags/ref_eventattributes.asp => Mídia Eventos

— 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 Referência de DOM de áudio e vídeo

— d1jhoni1b
fonte

11

-1. .on()é preferível ao .bind()jQuery 1.7, lançado em 2011. Além disso, formate seu código corretamente.

— Mark-Amery

4

Aqui está um exemplo completo, espero que ajude =).

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

4

Aqui está uma abordagem simples que dispara quando o vídeo termina.

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

Na linha 'EventListener', substitua a palavra 'ended' por 'pause' ou 'play' para capturar esses eventos também.

— user3758025
fonte

Você tem um erro de sintaxe neste código JS. Faltando) após a lista de argumentos

— frzsombor 27/11

1

Você pode simplesmente adicionar onended="myFunction()"à sua tag de vídeo.

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

0

Você pode adicionar ao ouvinte todos os eventos de vídeo, incluindo ended, loadedmetadata, timeupdateonde a endedfunção é chamada quando o vídeo termina

$("#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 snippet

— jafarbtech
fonte