Deteksi saat video HTML5 selesai

252

Bagaimana Anda mendeteksi ketika <video>elemen HTML5 selesai diputar?

html html5-video

— Brent
sumber

Dokumentasi yang sangat berguna dengan halaman uji dari Apple: developer.apple.com/library/safari/#samplecode/… Semua yang ingin Anda ketahui tentang acara video HTML5!

— viebel

311

Anda dapat menambahkan pendengar acara dengan 'berakhir' sebagai param pertama

Seperti ini :

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

8

Ini adalah satu-satunya video. Acara "on end" yang berfungsi di seluruh internet. Bravo!

— Isaac

10

Mengapa Anda memeriksa apakah ada?

— Allan Stepps

3

@ AllanStepps Dari apa yang saya dapat kumpulkan, if(!e) { e = window.event; }pernyataan bahwa jawaban ini awalnya termasuk adalah kode khusus IE untuk mendapatkan acara terbaru dari dalam pengendali acara yang dilampirkan attachEventpada versi awal IE. Karena dalam kasus ini, pawang dilampirkan addEventListener(dan versi awal IE tidak relevan bagi orang yang berurusan dengan video HTML5), itu sama sekali tidak perlu dan saya telah menghapusnya.

— Mark Amery

3

Satu hal yang perlu diperhatikan ketika menggunakan metode ini, Safari pada verson El Capitan OS X (10.11) tidak menangkap peristiwa 'berakhir'. Jadi dalam hal ini, saya perlu menggunakan acara 'pembaruan waktu' dan kemudian memeriksa kapan this.current Time sama dengan 0 lagi.

— Cam

2

Ingat juga untuk mengatur loop ke false, jika tidak, acara yang berakhir tidak akan dipicu.

— Israel Morales

134

Lihat semuanya yang perlu Anda ketahui tentang HTML5 Video dan posting Audio di situs Opera Dev di bawah bagian "Saya ingin menggulung kontrol saya sendiri".

Ini bagian terkait:

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

maka Anda dapat menggunakan:

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

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

onendedadalah acara standar HTML5 pada semua elemen media, lihat dokumentasi elemen media HTML5 (video / audio) .

— Alastair Pitts
sumber

2

Saya sudah mencoba menangkap acara "berakhir" dengan cara yang persis sama, seperti yang Anda presentasikan, tetapi acara ini tidak memecat. Saya di bawah Safari 5.0.4 (6533.20.27)

— AntonAL

@AntonAL: Saya akan memposting ini sebagai pertanyaan baru jika Anda mengalami masalah.

— Alastair Pitts

@ Semua: Anda dapat melakukannya seperti ini juga. <video class = "video_player" id = "video" poster = "gambar / video-pc.jpg" tabindex = "0" height = "100%" onended = "myHandler ()">

— VendettaDroid

5

@AlastairPitts Ini tidak valid di Chrome. Jawaban Darkroro adalah satu-satunya cara saya membuatnya bekerja dengan Chrome. Ini masih bekerja di Firefox.

— Jeff

Tautan mati. w3schools.com/tags/ref_eventattributes.asp => Acara Media

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

Jenis acara Referensi Audio HTML dan DOM Video

— d1jhoni1b
sumber

11

-1. .on()telah lebih disukai .bind()sejak jQuery 1.7, yang dirilis pada 2011. Juga, harap format kode Anda dengan benar.

— Mark Amery

4

Berikut adalah contoh lengkap, saya harap ini membantu =).

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

4

Berikut ini adalah pendekatan sederhana yang memicu ketika video berakhir.

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

Pada baris 'EventListener' gantilah kata 'berakhir' dengan 'jeda' atau 'main' untuk menangkap peristiwa-peristiwa itu juga.

— pengguna3758025
sumber

Anda memiliki kesalahan sintaksis dalam kode JS ini. Hilang) setelah daftar argumen

— frzsombor

1

Anda cukup menambahkan onended="myFunction()"ke tag video Anda.

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

0

Anda dapat menambahkan pendengar semua acara video dengan tambahan di ended, loadedmetadata, timeupdatemana endedfungsi dipanggil saat video berakhir

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

Luaskan cuplikan

— jafarbtech
sumber