в Safari jPlayer: завершенное событие не запускается после второго раза setMedia - PullRequest
Новая
       24

в Safari jPlayer: завершенное событие не запускается после второго раза setMedia

0 голосов
/ 08 февраля 2012

Я использую jQuery jPlayer для воспроизведения видеофайлов. Когда закончилось событие, я установил новое видео с помощью функции «setMedia». В Safari это законченное событие происходит только один раз. В других сообщениях я читал решение использовать событие паузы, это не работает: после установки setMedia в завершенном событии в Safari (5.1) не запускаются никакие события, поэтому не происходит никаких завершенных событий и никаких событий паузы.

Пример кода: 

$("#jquery_jplayer_1").jPlayer({
    ready: function () {
        console.log("Ready");
        $(this).jPlayer("setMedia", {
            m4v: "videos/main-intro.m4v"
        });
    },pause: function () {
        console.log('Video Player Paused');
    }
    ,ended: function () {
        $("#jquery_jplayer_1").jPlayer("setMedia", { 
            m4v: "videos/outro-slide-1.m4v"
        });     
        $("#jquery_jplayer_1").jPlayer("play");
        console.log("Video player Ended");      
    }
});

В Chrome работает нормально, консоль логов:

  • 1012 * Готов *

  • Видеоплеер приостановлен

  • Видеоплеер завершен

  • Видеоплеер приостановлен

  • Видеоплеер завершен

  • Etc ..

В Safari он не запускает никаких событий после setMedia, он только регистрирует:

  • Ready

Когда я удаляю функцию setMedia в обработчике завершения, события запускаются корректно.

обновление: однако на iPad оно работает случайным образом. Кажется, это не имеет никакого смысла.

1 Ответ

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

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

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

...