移动 Safari HTML5 视频 - 事件侦听器“结束”第二次未触发答案

【问题标题】：Mobile Safari HTML5 video - event listener 'ended' does not fire the 2nd time移动 Safari HTML5 视频 - 事件侦听器“结束”第二次未触发
【发布时间】：2011-08-09 23:29:28
【问题描述】：

我正在尝试添加一个按钮，按下时将播放视频，并在视频结束时显示图像。问题是我第二次按下按钮，视频结束，没有任何事情发生，好像没有调用事件监听器。

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

【问题讨论】：

我发现添加 video.currentTime=0.1;到 videoEnd() 将让事件监听器触发第二次，但第三次，它不起作用。
我遇到了这个确切的问题，但在桌面 Safari (5.0.5) 上。
您是否尝试在调用 load() 或 play() 之前添加 video.stop()？

标签： ipad mobile-safari html5-video

【解决方案1】：

这是由于 Safari 的 HTML5 视频标签实现中的一个奇怪错误造成的。它也可以在 Windows 的 Safari 上重现。我刚刚找到了一个解决这个问题的方法——只需绑定到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/

【讨论】：

【解决方案2】：

我相信“结束”事件在 VIDEO 元素到达结尾时不再触发。显然只有“暂停”事件会触发。

我通过简单地监听“timeupdate”事件并关联一个处理程序方法来解决这个问题，该方法检查 currentTime 属性是否等同于 VIDEO 元素的 duration 属性。

更新：我有时会在 iOS 中看到“结束”事件。我总是看到“暂停”事件。下面是一些在浏览器控制台中显示此信息的 jQuery 代码：

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

【讨论】：

这里没有显示结束的写入，因为视频在持续时间总时间之前停止：stackoverflow.com/questions/14714385/html-5-video-ended

【解决方案3】：

你应该像这样使用 timeupdate：

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

否则，它不会触发事件。

【讨论】：