Java Script Mutation Observer : Trick to skip entire video tutorial slides.

Disclaimer: This post is not at all promoting the way to skip the tutorials assigned to you by your corporate companies even if you don't know the content already. There are times when an employee is there in the firm for more than 10-15 years and has attended the same content tutorials every 6 months, hence they know the rules and things and these tutorials just become, kind of, formality for them.

 Do you guys have to complete all those compliance training in your corporate company as well?

Are those courses not skippable or automatic video slide where a bot person is constantly reading / explaining the bullet points or the slide content ? Like whenever one slide finishes off, you have to click "Next" button manually for the next slide to come up and that's why you have to sit down and listen to the whole content, even if you have already gone through this content dozens of time in your career.

Well I have a probable solution below with java script's Mutation Observer capability. Using this you can just run a script on one video each and go do your "actual" work by keeping the tutorial / course window in background.

                

Here is the solution:

• The above kind of video tutorials usually just disable the next button and automatically enable them when the slide is over so that user will be restricted to click the next button when the slide is going on.
• Now you might say that inspect the button and using browser's developers tool and just enable the button and click next. Button these people are not that much dumb who made the video player.
• So another thing to observe from your end when you proceed with using the script is that you need to see the HTML element manually atleast once when the video is playing.
• Copy the element real quick while the video / slide is still playing and the button is in disabled mode. (steps given below, don't worry)
• Now copy the same HTML element manually once again when the video / slide is done playing and its waiting for you to click the next button.

Here are the steps on how to do it:

                

In case you are not able to right click on the button, perform below step to inspect the button.

• When you are in the Tutorial window, press f12 on your keyboard.
• This will open a new window of dev tool. 
• In dev tool perform the steps shown in the image:

        

• In my case the button looks like this and while the video still is playing.

        

• Inspect the button again once your slide is done playing and waiting for you to click next.
• In my case the button looks like below:

        

• I see there is a difference in the classes of the same button when video is playing and when the video is done playing. Changing that class direct to remove the cs-disabled class doesn't work and doesn't enable the button or makes it clickable either.
• So the solution to this is to sit back and observe the button to get enabled and then click on it manually.
• No!!! The above solution is for those who don't want to use the power of Mutation observers :-p (little too dramatic)
• Now as I said, the solution is indeed to sit back and observe the button to get enabled and then click it, but in my solution you wont be doing it. You will be delegating this task to java script and it will do it for you.

Below are the steps and code on how to do it:

• In the dev tool of your browser follow below steps

                    

• Once the above thing is done, and the video / slide is waiting for you to click the next button press CTRL + ENTER. This will start your script and your script's observer will start observing the next button. 
• You will have to click the next button once after running the script.

• Below is the code snippet which needs to be used.
• I have added the comments to explain the code.

Note: You will obviously have to consider your own use case where the class of the button might be different in your case, or probably it could be something totally different which might be changing in your case which can be observed by mutation observer.

var elemToObserve = document.getElementById("next");
/**
*HERE THE cs-button METIONED IN BELOW LINE IS MY BUTTON'S CLASS.
* THIS CLASS WILL REMAIN FIXED ON THE BUTTON IN BOTH ENABLED AND DISABLED STATE.
*/
var prevClassState = elemToObserve.classList.contains('cs-button');

/**
* IN THE BELOW LINE WE ARE PREPARING AN OBSERVER.
**/
var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if(mutation.attributeName == "class"){
                        /**
                        * HERE IN THE BELOW LINE cs-disabled IS THE CLASS THAT WILL GET REMOVED
                        * WHENEVER THE VIDEO GETS FINISHED
                        */
                            var currentClassState = mutation.target.classList.contains('cs-disabled');
                            /**
                            * IN THE BELOW CHUNK OF IF BLOCK WE ARE CHECKING..
                            * IF THE PREVIOUS STATE OF THE CHANGED BUTTON IS..
                            * NOT EQUAL TO CURRENT STATE OF THE BUTTON..
                            * IF ITS NOT EQUAL THEN CHECK THE CURRENT CLASS STATE.
                            * SINCE WE ARE OBSERVING THE CLASS REMOVAL.. 
                            * WE WILL CHECK IF THE CLASS IS NOT PRESENT AND 
                            * THEN REACT TO CLICK A BUTTON.(ELSE BLOCK)
                            **/

                            if(prevClassState !== currentClassState)    {
                                prevClassState = currentClassState;
                                if(currentClassState)
                                    console.log("class added!");
                                else{
                                    console.log("class removed!");
                                    document.getElementById("next").click();
                                }
                                    
                            }
                        }
                    });
                });

//IN BELOW LINE WE ARE TELLING THE OBSERVER TO START OBSERVING OUR BUTTON. (elemToObserve)
observer.observe(elemToObserve, {attributes: true});

Enjoy!!! Please share the link it if you feel its helpful to you.