Question

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

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

Answer 1

我相信当VIDEO元素到达终点时，“已结束”事件不再触发。显然只有“暂停”事件才会触发。

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

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

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

Answer 2

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

Answer 3

你应该像这样使用timeupdate：

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

否则，它不会触发事件。

移动Safari HTML5视频 - 事件监听器'已结束'不会第二次触发

3 个答案: