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

Xan*_*iuM 0 html javascript event-listener addeventlistener

在我的主页上,我有以下视频标签:

<video id="player" autoplay="" controls="" loop="" muted="" preload="auto"
style="background:black;max-height:420px;" src="/videos/f_latest.mp4" type="video/mp4">
</video>
Run Code Online (Sandbox Code Playgroud)

然后在页面底部的末尾<script>之前我有这个 JavaScript <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");
}
Run Code Online (Sandbox Code Playgroud)

我遇到的问题是我无法让事件侦听器触发,尽管onVideoEnd('ended')在浏览器控制台中运行完全正常并且按照我想要的方式运行。

奇怪的是,我可以获得几乎相同的代码在不同的页面上工作:

<video src="" autoplay id="player" onclick="document.getElementById('pause').click()">
</video>
Run Code Online (Sandbox Code Playgroud)

然后就在下面<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);
Run Code Online (Sandbox Code Playgroud)

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

任何帮助或正确方向的步骤将不胜感激!

Jam*_*ton 5

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

删除此属性以使您的事件侦听器能够触发。