HTML5-видео Mobile Safari - прослушиватель событий 'завершен' не запускается второй раз - PullRequest
Новая
       23

HTML5-видео Mobile Safari - прослушиватель событий 'завершен' не запускается второй раз

6 голосов
/ 21 апреля 2011

Я пытаюсь добавить кнопку, когда нажата будет воспроизводить видео, а когда видео заканчивается, отображается изображение. Проблема в том, что во второй раз, когда я нажимаю кнопку, видео заканчивается, и ничего не происходит, как будто не вызывается прослушиватель событий. 

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";
}

Ответы [ 3 ]

0 голосов
/ 14 июня 2014

Вы должны использовать timeupdate следующим образом: 

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

В противном случае, событие не запускается.

0 голосов
/ 04 декабря 2014

Это связано со странной ошибкой в ​​реализации тега HTML5 в Safari.Он также может быть воспроизведен в Safari для Windows.Я только что нашел один обходной путь для этой проблемы - просто привяжите к событию loadedmetadata и установите для currentTime некоторое ненулевое значение.Вот пример: 

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

Вы можете попробовать это демо в этом jsfiddle: http://jsfiddle.net/j2knz6sv/

0 голосов
/ 18 октября 2011

Я полагаю, что событие «конец» больше не срабатывает, когда элемент ВИДЕО достигает конца. Видимо, срабатывает только событие "пауза".

Я справился с этим, просто прослушав событие timeupdate и связав метод-обработчик, который проверяет, эквивалентно ли свойство currentTime свойству duration элемента VIDEO.

ОБНОВЛЕНИЕ: Я иногда вижу событие «закончилась» в iOS. Я всегда вижу событие "паузы". Вот некоторый код jQuery, который отображает эту информацию в консоли браузера: 

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