CODEWITHSUNDEEP
javascripthtmladdeventlistenerevent-listener
XantiuM
XantiuM

Reputation: 130

Video event listener waiting for 'ended' not firing

On my homepage I have the following video tag:

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

Then at the bottom of the page I have this JavaScript inside a <script> just before the end of <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");
}

The problem I am having is that I can not get the event listener to fire, although running onVideoEnd('ended') in my browser's console works completely fine and behaves the way I want it to.

The strange thing is, I can get nearly identical code to work on a different page:

<video src="" autoplay id="player" onclick="document.getElementById('pause').click()">
</video>

Then right underneath in a <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);

I noticed in the Chrome console that LastPass may be interfering with my script as it states Error in event handler for (unknown): TypeError: Cannot read property 'windowID' of null although Chrome highlights <!DOCTYPE html> and disabling LastPass in Chrome and Firefox doesn't fix this issue. However, I'd like to clarify that the console doesn't print out any errors otherwise.

Any help or steps in the right direction would be appreciated!

Upvotes: 0

Views: 2504

Answers (1)

Jamie Weston
Jamie Weston

Reputation: 355

You have a loop attribute on the first video. This means it never technically ends, and will just continue playing from the beginning.

Remove this attribute to enable your event listener to fire.

Upvotes: 7

Related Questions