我正在尝试添加一个按钮，按下时将播放视频，并且当视频结束时显示图像。问题是，我第二次按下按钮时，视频结束，并且没有任何反应，就好像事件侦听器没有被调用一样。
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";
}
这是由于 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/ http://jsfiddle.net/j2knz6sv/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
