在我的主页上，我有以下视频标签:
<video id="player" autoplay="" controls="" loop="" muted="" preload="auto"
style="background:black;max-height:420px;" src="/videos/f_latest.mp4" type="video/mp4">
</video>
然后在页面底部我有这个 JavaScript 在 <script> 中就在<body>结束之前:
var player = document.getElementById('player');
var firstVideo = Math.round(Math.random()); // Returns 0 or 1 to choose which
// video to display first
if (firstVideo) player.setAttribute("src", "/videos/t_latest.mp4");
player.addEventListener('ended',onVideoEnd,false); // The offending event listener
function onVideoEnd(e) {
if (player.getAttribute("src") == "/videos/f_latest.mp4")
player.setAttribute("src", "/videos/t_latest.mp4");
else player.setAttribute("src", "/videos/f_latest.mp4");
}
我遇到的问题是，尽管运行onVideoEnd('ended')，但我无法触发事件监听器。在我的浏览器控制台中工作完全正常并且按照我想要的方式运行。
奇怪的是，我可以在不同的页面上使用几乎相同的代码:
<video src="" autoplay id="player" onclick="document.getElementById('pause').click()">
</video>
然后就在 <script> 的正下方:
var player = document.getElementById('player');
player.addEventListener('ended',onVideoEnd,false);
function onVideoEnd(e) {
get(0);
}
function get(direction) {
// Snipped
}
// More unrelated functions snipped
get(0);
我在 Chrome 控制台中注意到 LastPass 可能会干扰我的脚本，因为它显示 Error in event handler for (unknown): TypeError: Cannot read property 'windowID' of null尽管 Chrome 突出显示 <!DOCTYPE html>在 Chrome 和 Firefox 中禁用 LastPass 并不能解决此问题。不过，我想澄清一下，否则控制台不会打印出任何错误。
任何帮助或正确方向的步骤将不胜感激!
最佳答案
您的第一个视频有一个loop属性。这意味着它在技术上永远不会结束，只会从头开始继续播放。
删除此属性以使您的事件监听器能够触发。
关于javascript - 等待 'ended' 的视频事件监听器未触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51905430/