All geek questions in one place

Mobile Safari HTML5 video - event listener "over" does not start a second time

I try to add a button when I click to play the video, and when the video ends, the image is displayed. The problem is that the second time I press the button, the video ends and nothing happens, as if the event listener had not been called.

var video = document.getElementById("video"); function playVideo() { video.style.display="block"; //video.load() [adding this the 2nd time wont play] video.play(); video.addEventListener('ended', videoEnd, false); } function videoEnd() { video.style.display="none"; bg_image.src="image.jpg"; }
+6
source share
3 answers

I believe that the “ended” event no longer fires when the VIDEO element reaches the end. Apparently, only the pause event is triggered.

I got around this by simply listening to the "timeupdate" event and binding a handler method that checks if the currentTime property is equivalent to the duration property of the VIDEO element.

UPDATE: I sometimes see the event "ended" in iOS. I always see a pause event. Here is the jQuery code that displays this information in the browser console:

  (function ($) { $("#vid").bind("timeupdate", function (e) { console.log(e.type + " - " + (this.currentTime == this.duration)); }); })(jQuery);
0
source

This is due to an unusual error in the implementation of Safari HTML5 tags. It can also be played in Safari for Windows. I just found a workaround for this problem - just bind to the loadedmetadata event and set currentTime some non-zero value. Here is an example:

 <!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> </head> <body> <video id="video" width="500" height="400" controls autoplay></video> <script> var src = [ "http://content.adfox.ru/131007/adfox/205544/865991_11.mp4", "http://all.rutube.ru/130627/gpmdigital/217059/805529_11.mp4" ]; var curSrc = 0; $(function() { $('#video').attr("src", src[curSrc % src.length]); curSrc++; var video = $('#video').get(0); $('#video') .on('loadedmetadata', function() { video.currentTime=0.01; video.play(); }) .on('ended', function() { console.log('ended'); video.src = src[curSrc % src.length]; video.load(); curSrc++; }); }); </script> </body> </html>

You can try this demo in this jsfiddle: http://jsfiddle.net/j2knz6sv/

0
source

You should use timeupdate like this:

 this.currentTime >= (this.duration-1)

Otherwise, it does not cause an event.

-3
source

Source: https://habr.com/ru/post/886350/

More articles:


All Articles