add class not working with html5 video player using jquery

Question

I have a simple video block, on video ended I am displaying certain gif,

Problem:

Now when a user pauses the video the gif also shows up, meaning When the video has ended the gifs shows up now when I play again the video and pause the video the gifs show again

To do

I want when a user pauses the video the gif should not display, meaning the gif should show up only on video ended

Here is my solution

HTML

<div canplay id="video-block">
    <div id="video-container">
        <video id="videoplayer" playsinline muted autoplay>
            <source src="videos/good_job.mp4"></source>
        </video>
        <div id="interactive-layers">
        </div>

    </div>

    <div id="pause-play-button">
        <img id="play" src="images/play.png">
        <img id="pause" src="images/pause.png">
    </div>

Js

$(document).ready(function(){
        $("#videoplayer")[0].addEventListener("ended", onVideoEnded);
});


function showGif(gifname) {
        $("#gif-data").remove();
        var gif = $("<div id='gif-data'><audio class='audio' id='gifaudio'  autoplay src='" + gifs[gifname].audio + "'></audio><img class='gif' id='animatedgif' src='" + gifs[gifname].gif + "?rand=" + Math.random() + "'></div>")
        $("#interactive-layers").append(gif);
}


function onVideoEnded(e) {

        showGif("ed22");

}


$("#pause-play-button").on("click", function () {
        clearTheTimeout();
        if ($("#video-block video")[0].paused == true) {
                $("#gif-data").addClass("hidegif");
                $("#video-block video")[0].play();
                $("#pause").css("display", 'block');
                $("#play").css("display", "none");
        } else {
                $("#video-block video")[0].pause();
                $("#audioplayer")[0].pause();
                $("#gif-data").removeClass("hidegif");
                $("#pause").css("display", 'none');
                $("#play").css("display", "block");
        }
});

CSS

.hidegif{
    display: none;
}

Unfortunately, still, my giffs shows up when I click pause video button,

What am I doing wrong?

Answer 1

I think the problem happens because element 'gif-data' created dynamically. Try to find an element inside the parent static element.

    $('#video-block').find("#gif-data").addClass("hidegif");

That should work.

Answer 2

It's a few months old post but in my experience addEventListener not works all the time with Jquery but the .on event works. so when you are listening the ended event, do it with .on and write the showGif function inside it.