Bir HTML5 videosu bittiğinde algılama

252

Bir HTML5 <video>öğesinin oynatılması bittiğinde nasıl tespit edersiniz ?

html html5-video

— Brent
kaynak

Apple'ın test sayfasıyla çok kullanışlı belgeler: developer.apple.com/library/safari/#samplecode/… HTML5 video etkinliklerinde bilmek istediğiniz her şey!

— viebel

311

İlk sona ermiş olarak "sona erdi" ifadesiyle bir etkinlik dinleyicisi ekleyebilirsiniz

Bunun gibi :

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

8

Bu, tüm internette çalışan tek video. Bravo!

— Isaac

10

E'nin var olup olmadığını neden kontrol ediyorsunuz?

— Allan Stepps

3

@AllanStepps Toplayabildiğim kadarıyla, if(!e) { e = window.event; }bu cevabın başlangıçta içerdiği ifade , IE'nin attachEventerken sürümlerinde eklenmiş bir olay işleyicisinden en son olayı almak için IE'ye özgü koddur . Bu durumda, işleyici bağlı olduğundan addEventListener(ve IE'nin ilk sürümleri HTML5 videosu ile ilgilenen kişilerle alakasızdır), tamamen gereksizdi ve kaldırdım.

— Mark Amery

3

Bu yöntemi kullanırken dikkat edilmesi gereken bir nokta, OS X'in El Capitan versonundaki Safari (10.11) 'sona erdi' olayını yakalamaz. Bu durumda, 'timeupdate' olayını kullanmam ve ardından bu zamanın tekrar 0'a eşit olup olmadığını kontrol etmem gerekiyordu.

— Cam

2

Döngüyü false olarak ayarlamayı da unutmayın, aksi takdirde sonlanan olay tetiklenmez.

— Israel Morales

134

"Kendi denetimlerimi kaldırmak istiyorum" bölümündeki Opera Dev sitesinde HTML5 Video ve Sesli Yayın Hakkında Bilmeniz Gereken Her Şey'e bir göz atın .

Bu ilgili bölümdür:

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

o zaman kullanabilirsiniz:

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

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

onendedtüm medya öğelerinde standart bir HTML5 etkinliğidir, HTML5 medya öğesi (video / ses) etkinlik belgelerine bakın.

— Alastair Pitts
kaynak

2

"Sona erdi" olayı tam olarak aynı şekilde yakalamaya çalıştım, ancak bu olay tetiklenmiyor. Safari 5.0.4 altındayım (6533.20.27)

— AntonAL

@AntonAL: Sorun yaşıyorsanız bunu yeni bir soru olarak gönderirim.

— Alastair Pitts

@Tüm: Bunu da böyle yapabilirsiniz. <video class = "video_player" id = "video" poster = "images / video-pc.jpg" tabindex = "0" height = "100%" onended = "myHandler ()">

— VendettaDroid

5

@AlastairPitts Bu, Chrome'da geçerli değildir. Darkroro'nun yanıtı Chrome ile çalışmamın tek yolu. Bu hala Firefox'ta çalıştı.

— Jeff

Ölü bağlantılar. w3schools.com/tags/ref_eventattributes.asp => Medya Etkinlikleri

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

Etkinlik türleri HTML Ses ve Video DOM Başvurusu

— d1jhoni1b
kaynak

11

-1. 2011 yılında piyasaya sürülen jQuery 1.7'den beri .on()tercih .bind()edilmiştir. Ayrıca, lütfen kodunuzu doğru şekilde biçimlendirin.

— Mark Amery

4

İşte tam bir örnek, umarım yardımcı olur =).

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

4

İşte video sona erdiğinde tetiklenen basit bir yaklaşım.

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

'EventListener' satırında, 'sona erdi' sözcüğünü, bu olayları yakalamak için 'duraklat' veya 'oynat' ile değiştirin.

— user3758025
kaynak

Bu JS kodunda bir sözdizimi hatası var. Bağımsız değişken listesinden sonra)

— frzsombor

1

onended="myFunction()"Video etiketinize kolayca ekleyebilirsiniz .

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

0

Sen nicluding tüm video etkinliklerini dinleyici ekleyebilirsiniz ended, loadedmetadata, timeupdatenerede endedfonksiyon zaman videosu bitene çağrılan

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

Snippet'i genişlet

— jafarbtech
kaynak