how to use mutationobserver with youtube spa technology in javascript

Admin 1
Viewed 250

I want the video in a youtube playlist to go to the next video when it reaches the second I want. But I can't check the location.href all the time, I want the code to run when the same url is opened again because I loop the playlist.

const counterEle = document.querySelector("video");

function generateCount(limit) {
  mutation(160.510023);

  if (counterEle.currentTime > limit) {
    console.log("current > limit");
  } else {
    setTimeout(generateCount, 3000, limit);
    setTimeout(mutation, 3000, limit);
  }
}


let previousUrl = 'https://www.youtube.com/watch?v=93qE6Z8qheA&list=PL9dIg-VwAsxZdZvuHjzTOP8-49CWpis17&index=5';
const observer = new MutationObserver(mutation);

function mutation(limit) {
  generateCount(160.510023);
  if (location.href == previousUrl) {
    console.log(`URL changed to ${location.href}`);
    if (counterEle.currentTime > limit) {
      document
        .querySelector(
          "#movie_player > div.ytp-chrome-bottom > div.ytp-chrome-controls > div.ytp-left-controls > a.ytp-next-button.ytp-button"
        )
        .click();
    } else {
      setTimeout(generateCount, 3000);
    }
    } else {
      console.log("!=");
    }
}

I tried many methods, what am I doing wrong?

(There is no problem with the code working, just checking the domain name is a problem)

single-page-application youtube url javascript performance
1 Answers

You can use ontimeupdate on the video html media element. This way, you get notified when the currentTime is changing.

Also you can check if an ad is playing using document.querySelector('.ad-interrupting')

The following code will play the next element in the playlist after 5 seconds:

const specificTime = 5; //play next after 5 seconds
const vid = document.querySelector("video");
vid.ontimeupdate = function onTimeUpdate(){
    var ad = document.querySelector('.ad-interrupting');
    if (!ad && vid.currentTime >= specificTime){
        console.log("playing next");
        document.querySelector(
            "#movie_player > div.ytp-chrome-bottom > div.ytp-chrome-controls > div.ytp-left-controls > a.ytp-next-button.ytp-button"
        ).click();
    }
}

Tampermonkey script example:

// ==UserScript==
// @name         autoplay next video in playslist
// @version      0.1
// @description  play next video in playlist after X seconds
// @include      /https:\/\/www\.youtube\.com\/watch?.*list=PL9dIg-VwAsxZdZvuHjzTOP8-49CWpis17.*/
// ==/UserScript==

(function() {
    'use strict';

    const specificTime = 5; //play next after 5 seconds
    const vid = document.querySelector("video");
    vid.ontimeupdate = function onTimeUpdate(){
        var ad = document.querySelector('.ad-interrupting');
        if (!ad && vid.currentTime >= specificTime){
            console.log("playing next");
            document.querySelector(
                "#movie_player > div.ytp-chrome-bottom > div.ytp-chrome-controls > div.ytp-left-controls > a.ytp-next-button.ytp-button"
            ).click();
        }
    }
})();

which match this playlist when activated

user_26143640
Related