Mobile Safari HTML5 视频 - 事件侦听器“结束”第二次不触发

发布于 2024-11-02 18:26:08 字数 431 浏览 1 评论 0原文

我正在尝试添加一个按钮，按下时将播放视频，并且当视频结束时显示图像。问题是，我第二次按下按钮时，视频结束，并且没有任何反应，就好像事件侦听器没有被调用一样。

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

原文

I am trying to add a button when pressed will play a video, and when the video ends an image is displayed. The problem is that the 2nd time i press the button, the video ends, and nothing happens as if the event listener does not get called.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

扮仙女 2024-11-09 18:26:08

这是由于 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/

This is due to a strange bug in Safari's HTML5 video tag implementation. It can be reproduced on Safari for Windows as well. I've just found one workaround for this problem - just bind to loadedmetadata event and set the currentTime to some non-zero value. Here is an example:

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

回复收藏 0 原文

天气好吗我好吗 2024-11-09 18:26:08

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

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

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

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

I believe that the "ended" event no longer fires when a VIDEO element reaches the end. Apparently only the "pause" event fires.

I've gotten around this by simply listening to the "timeupdate" event and associating a handler method that checks if the currentTime property is equivalent to the duration property of the VIDEO element.

UPDATE: I sometimes see the "ended" event in iOS. I always see the "pause" event. Here's some jQuery code that displays this information in the browser console:

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

回复收藏 0 原文