Автоматическая приостановка видео с помощью document.visibilityState

Недавно я смотрел видео в Интернете, когда перед видео проигрывалась реклама, которую я не мог пропустить. Я с нежностью вспоминаю свое решение

ага! Я покажу этому рекламодателю. Я просто открою новую вкладку на следующие 30 секунд, когда мне нужно будет что-то сделать!

К моему удивлению, видео переставало воспроизводиться, когда я переключал вкладки. В результате потерянных 30 секунд я создал проблему, чтобы сделать то же самое в нашем собственном веб-компоненте видеоплеера.

Это было очень легко добавить, отчасти благодаря:

  • жизненному циклу LitElement’s firstUpdated, благодаря которому я знал, когда video-player был присоединен к DOM
  • событие visibilitychange, которое срабатывает на документе при смене вкладок или сворачивании окна просмотра.

Вот пример, предоставленный Mozilla, который я практически переработал:

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === 'visible') {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});
Вход в полноэкранный режим Выход из полноэкранного режима

Замените «music» на «toggle video», и это было очень легко учесть. Вот код, который демонстрируется в этом видео. В видео я также демонстрирую некоторые способы обхода текущей реализации.

Видео

Оцените статью
devanswers.ru
Добавить комментарий