Rileva quando termina un video HTML5

261

Come fai a rilevare quando un <video>elemento HTML5 ha terminato la riproduzione?

html html5-video

— Brent
fonte

Documentazione molto utile con la pagina di test di Apple: developer.apple.com/library/safari/#samplecode/… Tutto quello che volevi sapere sugli eventi video HTML5!

— viebel

321

Puoi aggiungere un listener di eventi con "terminato" come primo parametro

Come questo :

<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

9

Questo è l'unico video evento "on end" che funziona in tutta Internet. Bravo!

— Isaac

10

Perché controlli se e esiste?

— Allan Stepps

3

@AllanStepps Da quello che posso raccogliere, l' if(!e) { e = window.event; }affermazione che questa risposta includeva originariamente è un codice specifico di IE per ottenere l'ultimo evento dall'interno di un gestore di eventi collegato alle attachEventprime versioni di IE. Dal momento che in questo caso, il gestore è collegato con addEventListener(e quelle prime versioni di IE sono irrilevanti per le persone che si occupano di video HTML5), era completamente inutile e l'ho rimosso.

— Mark Amery

4

Un punto da notare quando si utilizza questo metodo, Safari sulla versione El Capitan di OS X (10.11) non cattura l'evento "terminato". Quindi, in quel caso, dovevo usare l'evento 'timeupdate' e quindi verificare quando this.current Time era di nuovo uguale a 0.

— Cam

2

Ricorda anche di impostare loop su false, altrimenti l'evento terminato non verrà attivato.

— Israel Morales

136

Dai un'occhiata a questo post Tutto quello che devi sapere su video e audio HTML5 sul sito di Opera Dev nella sezione "Voglio eseguire i miei controlli".

Questa è la sezione pertinente:

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

allora puoi usare:

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

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

onendedè un evento standard HTML5 su tutti gli elementi multimediali, vedere la documentazione degli eventi degli elementi multimediali HTML5 (video / audio) .

— Alastair Pitts
fonte

3

Ho provato a catturare l'evento "terminato" esattamente nello stesso modo, come hai presentato, ma questo evento non si sta attivando. Sono in Safari 5.0.4 (6533.20.27)

— AntonAL

@AntonAL: la posterò come una nuova domanda se hai problemi.

— Alastair Pitts

@ Tutti: puoi farlo anche in questo modo. <video class = "video_player" id = "video" poster = "images / video-pc.jpg" tabindex = "0" height = "100%" onended = "myHandler ()">

— VendettaDroid

5

@AlastairPitts Questo non è valido su Chrome. La risposta di Darkroro è l'unico modo per farlo funzionare con Chrome. Funzionava ancora su Firefox.

— Jeff

Collegamenti morti. w3schools.com/tags/ref_eventattributes.asp => Eventi per i media

— Aurelien

37

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>

Tipi di evento Riferimento DOM audio e video HTML

— d1jhoni1b
fonte

11

-1. .on()è stato preferito rispetto a .bind()jQuery 1.7, che è stato rilasciato nel 2011. Inoltre, formattare correttamente il codice.

— Mark Amery

4

Ecco un esempio completo, spero che aiuti =).

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

Ecco un semplice approccio che si attiva quando il video finisce.

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

Nella riga "EventListener" sostituire la parola "terminato" con "pausa" o "riproduzione" per acquisire anche questi eventi.

— user3758025
fonte

Hai un errore di sintassi in questo codice JS. Mancante) dopo l'elenco degli argomenti

— frzsombor

2

Puoi semplicemente aggiungere onended="myFunction()"al tuo tag 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
fonte

0

Puoi aggiungere listener tutti gli eventi video nicluding ended, loadedmetadata, timeupdatedove la endedfunzione viene chiamata quando il video finisce

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

Espandi lo snippet

— jafarbtech
fonte