Question

我正在使用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 中工作正常，控制台会记录：

就绪
视频播放器暂停
视频播放器已结束
视频播放器暂停
视频播放器已结束
等。

在 Safari 中，它不会在setMedia之后触发任何事件，它只会记录：

就绪

当我在已结束的处理程序中删除setMedia函数时，事件被正确触发。

更新：然而，在iPad上似乎随机工作。它似乎没有任何意义。

Answer 1

这是由于Safari的HTML5视频标签实施中存在一个奇怪的错误。它也可以在Safari for 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/

在Safari jPlayer中：第二次setMedia后没有触发结束事件

1 个答案: