Javascript function to check if there is a video on the page and then hide the next button for the duration of the video

Question

I am trying to build a function to check for a video on an html page and if it exists, hide the next button on the page for the duration on the video. So far my code looks like this:

<script type="text/javascript">

$(document).onload(function () {
    //grab video in variable
    var video = document.getElementsByClassName("Video");
    //if video exists, hide the next button, get duration
    if (typeof (video) != 'undefined' && video != null) {
        //grab the next button by 'next' class
        var nextButton = document.getElementsByClassName('next');
        //hide next by adding bootstrap 'd-none' class
        nextButton.classList.add('d-none');
        //grab duration on video to set timer
        var duration = video.duration;
        //set a timer for the duration of the video
        setTimeout(nextButton.classList.remove('d-none', duration))
    } 
    });

I am not sure why my function isn't working. Any help would be awesome, thanks.

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — , Sep 08 '20 at 18:26
Note that `getElementsByClassName("video")` will find elements like `
`, which may more may not actually contain a video. You may want to use `getElementsByTagName("video")`, or more succinctly, `querySelectorAll("video")`. — Heretic Monkey, Sep 08 '20 at 19:02

score 2 · Accepted Answer · answered Sep 08 '20 at 18:55

Can you share your HTML and the jquery version you're using?

so far, Here are a few things that I've noticed in the above code

I suggest that you try your selectors in chrome console in the page you're developing.

Starting with this.

var video = document.getElementsByClassName("Video");

I'd suggest checking MDN for docs about getElementsByClassName

It returns an array of elements that match your selector, not a single element (assuming that each video element has a class named Video)

so, to access the element, it should be accessed as video[0], but it's usually a good idea to check for array length before accessing the elements.

so, I guess you can do something like

/*that will select the first video element, assuming your video has a class named "Video" you can also use var video = document.getElementsByTagName("video")[0]; */

var video = document.getElementsByClassName("Video")[0];
//check if the element exists
if (video) {
    //select the "Next" button, assumuing it has a class named 'next'
    var nextButton = document.getElementsByClassName('next')[0];
    //hide next by adding bootstrap 'd-none' class
    nextButton.classList.add('d-none');

    //start playing the video
    video.play();
    /*grab duration on video to set timer
    note the *1000, 
    since setTimeout takes time in milliseconds, we need to multiply by 1000 to convert to seconds
    */var duration = video.duration * 1000;
    //set a timer for the duration of the video

    /**
     * The syntax here was not correct.
     * setTimeout takes a function as first parameter, the duration as second parameter.
     */
    setTimeout(() => {
        //hide the timer on video duration over
        nextButton.classList.remove('d-none')
    }, duration);

}

This worked! adding the element index helped and the settimeout syntax. — sharpecheddar, Sep 08 '20 at 22:32

score 0 · Answer 2 · answered Sep 08 '20 at 18:54

document.getElementsByClassName('class_name') return a NodeList not just a single node.

So if there is only one video element with the video class name then you should change nextButton.classList.add('d-none'); to nextButton[0].classList.add('d-none');.

Or if you have multiple video class named element then you should consider using a loop and adding an ended event listener to each one of them.

And also fix your setTimeout function,

setTimeout(() => {
    nextButton.classList.remove('d-none')
}, duration);

score 0 · Answer 3 · answered Sep 08 '20 at 18:55

if(document.getElementsByTagName("video").length > 0){
  document.getElementById("idOfNextButton").style.display = "none";
}

document.getElementsByTagName(tag) gets every element that matches the tag. You can easily hide the element with style.display = "none". If you want to constantly check this, you can repeat the code above using the following:

setInterval(function(){
}, 1); // repeats every millisecond

Javascript function to check if there is a video on the page and then hide the next button for the duration of the video

3 Answers3