在Safari jPlayer中：在第二次setMedia之后不会触发end事件

Question

I'm using the jQuery jPlayer to play video files. 我正在使用jQuery jPlayer播放视频文件。 When the ended event fires I set a new video with the function 'setMedia'. 当结束事件触发时，我使用“ setMedia”功能设置了一个新视频。 In Safari this ended event only fires once. 在Safari中，此结束事件仅触发一次。 In other posts I read a solution to use the pause event, this doesn't work: after setting setMedia in the ended event, no events are fired in Safari (5.1), so no ended and no pause events are being fired. 在其他文章中，我读到了使用暂停事件的解决方案，该方法不起作用：在end事件中设置setMedia之后，在Safari（5.1）中不会触发任何事件，因此不会触发任何end，也不会触发任何暂停事件。

Code sample: 代码示例：

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

In Chrome it workes fine, the console logs: 在Chrome中正常运行，控制台记录：

Ready 准备
Video Player Paused Video Player暂停
Video player Ended 影片播放器已结束
Video Player Paused Video Player暂停
Video player Ended 影片播放器已结束
Etc.. 等等..

In Safari it doesn't fire any events after the setMedia, it only logs: 在Safari中 ，setMedia之后不会触发任何事件，它只会记录：

Ready 准备

When I remove the setMedia function in the ended handler the events are triggered correctly. 当我在结束的处理程序中删除setMedia函数时，将正确触发事件。

update: However, on the iPad it seems to work randomly. 更新：但是，在iPad上，它似乎随机工作。 It doesn't seem to make any sense. 这似乎没有任何意义。

Answer 1

This is due to a strange bug in Safari's HTML5 video tag implementation. 这是由于Safari的HTML5视频标签实现中出现一个奇怪的错误。 It can be reproduced on Safari for Windows as well. 也可以在Windows的Safari上复制它。 I've just found one workaround for this problem - just bind to loadedmetadata event and set the currentTime to some non-zero value. 我刚刚找到了解决此问题的一种方法-只需绑定到loadedmetadata事件并将currentTime设置为一些非零值即可。 Here is an example (don't forget to optimize it for jPlayer): 这是一个示例（不要忘记针对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>

You can try this demo in this jsfiddle: http://jsfiddle.net/j2knz6sv/ 您可以在以下jsfiddle中尝试此演示： http : //jsfiddle.net/j2knz6sv/

在Safari jPlayer中：在第二次setMedia之后不会触发end事件

问题描述

1 个解决方案

解决方案1
0 2014-12-04 01:08:33

在Safari jPlayer中：在第二次setMedia之后不会触发end事件

问题描述

1 个解决方案

解决方案1 0 2014-12-04 01:08:33

解决方案1
0 2014-12-04 01:08:33