Question

在我的主页上，我有以下视频标签：

<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控制台中注意到，尽管Chrome突出显示Error in event handler for (unknown): TypeError: Cannot read property 'windowID' of null，并且在Chrome和Firefox中禁用LastPass不能解决此问题，但LastPass可能会干扰我的脚本，因为它指出了<!DOCTYPE html>。但是，我想澄清一下，否则控制台不会打印出任何错误。

任何帮助或朝正确方向迈出的步伐将不胜感激！

Answer 1

您在第一个视频中拥有一个loop属性。这意味着从技术上讲它永远不会结束，只会从头开始继续播放。

删除此属性以启用事件侦听器。

视频事件监听器等待“结束”未触发

1 个答案: