как использовать mutationobserver с технологией youtube spa в javascript

#javascript #performance #url #youtube #single-page-application

Вопрос:

Я хочу, чтобы видео в плейлисте YouTube переходило к следующему видео, когда оно достигнет желаемой секунды. Но я не могу проверять location.href все время, я хочу, чтобы код запускался при повторном открытии того же URL-адреса, потому что я зацикливаю список воспроизведения.

 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=93qE6Z8qheAamp;list=PL9dIg-VwAsxZdZvuHjzTOP8-49CWpis17amp;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("!=");
    }
} 

Я перепробовал много методов, что я делаю не так?

(Нет никаких проблем с работой кода, просто проверка доменного имени является проблемой)

Комментарии:

1. Попробуйте это: не проверяйте, достигает ли видео заданного времени (т. Е. if (counterEle.currentTime > limit) { ), а вместо этого вызывайте свой метод mutation setTimeout(<your_method>, <set_milliseconds_here>); и сохраняйте URL — адрес списка воспроизведения при воспроизведении нового видео, затем зациклите этот новый массив и проверьте, был ли URL-адрес уже добавлен в массив-добавление логики, которая вам нужна.

Ответ №1:

Вы можете использовать ontimeupdate на video html-элементе мультимедиа. Таким образом, вы будете получать уведомления об изменении текущего времени.

Также вы можете проверить, воспроизводится ли реклама с помощью document.querySelector('.ad-interrupting')

Следующий код воспроизведет следующий элемент в списке воспроизведения через 5 секунд:

 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 amp;amp; 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:

 // ==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 amp;amp; 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();
        }
    }
})();
 

которые соответствуют этому списку воспроизведения при активации

Комментарии:

1. if (!ad amp;amp; vid.currentTime >= specificTime amp;amp; document.location.href == "https://www.youtube.com/watch?v=93qE6Z8qheAamp;list=PL9dIg-VwAsxZdZvuHjzTOP8-49CWpis17amp;index=5") Когда я добавил имя поля в условие if, оно сработало нормально, спасибо