Wykryj, kiedy kończy się film HTML5

Odpowiedzi:

311

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>
Lothereus
źródło
8
To jedyne wideo. Wydarzenie „na koniec”, które działa w całym Internecie. Brawo!
Izaak,
10
Dlaczego sprawdzasz, czy e istnieje?
Allan Stepps
3
@AllanStepps Z tego, co mogę zebrać, 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.
Mark Amery
3
Należy zwrócić uwagę na jedną rzecz, używając tej metody, Safari na El Capitan verson OS X (10.11) nie wychwytuje zdarzenia „zakończonego”. Więc w takim przypadku musiałem użyć zdarzenia „timeupdate”, a następnie sprawdzić, kiedy to. Bieżący czas znów był równy 0.
Cam
2
Pamiętaj także o ustawieniu pętli na false, w przeciwnym razie zakończone zdarzenie nie zostanie wyzwolone.
Israel Morales
134

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

Alastair Pitts
źródło
2
Próbowałem złapać zdarzenie „zakończone” dokładnie w taki sam sposób, jak przedstawiłeś, ale to wydarzenie się nie uruchamia. Jestem pod Safari 5.0.4 (6533.20.27)
AntonAL
@AntonAL: Jeśli masz problemy, opublikuję to jako nowe pytanie.
Alastair Pitts
@Wszystko: Możesz to zrobić w ten sposób. <video class = "video_player" id = "video" poster = "images / video-pc.jpg" tabindex = "0" height = "100%" onended = "myHandler ()">
VendettaDroid
5
@AlastairPitts To nie dotyczy Chrome. Odpowiedź Darkroro to jedyny sposób, w jaki mogłem pracować z Chrome. To nadal działało w przeglądarce Firefox.
Jeff
Martwe linki. w3schools.com/tags/ref_eventattributes.asp => Wydarzenia medialne
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>

Typy zdarzeń HTML Audio i wideo Dokumentacja DOM

d1jhoni1b
źródło
11
-1. .on()jest preferowany .bind()od jQuery 1.7, który został wydany w 2011 roku. Również proszę poprawnie sformatować kod.
Mark Amery
4

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>
Oscar_Wroclaski
źródło
4

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.

użytkownik3758025
źródło
Wystąpił błąd składniowy w tym kodzie JS. Brak) po liście argumentów
frzsombor
1

Możesz po prostu dodać onended="myFunction()"do tagu wideo.

<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.
źródło
0

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>
Rozwiń fragment kodu

jafarbtech
źródło