document.visibilityState를 사용하여 비디오 자동 일시 중지

최근에 온라인으로 동영상을 보다가 건너뛸 수 없는 동영상이 재생되기 전에 광고가 재생되었습니다. 나는 좋아하는 내 솔루션을 기억합니다

aha! I'll show that advertiser. I'll just open a new tab for the next 30 seconds that are critical I do something!

놀랍게도 탭을 전환하면 비디오 재생이 중지됩니다. 잃어버린 30초의 결과로 우리 자신의 문제video-player web component에서 동일한 작업을 수행하는 문제를 만들었습니다.

부분적으로 다음 덕분에 추가하기가 정말 쉬웠습니다.

firstUpdated가 DOM

에 연결된 시점을 알게 해주는 LitElement의 video-player 수명 주기

탭을 변경하거나 탐색 창을 최소화할 때 visibilitychange event that fires on the document.

다음은 내가 기본적으로 리버스 엔지니어링한 Mozilla가 제공하는 예입니다.

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === 'visible') {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

"동영상 전환"을 "음악"으로 바꾸면 설명하기가 매우 쉽습니다. Here's the code being walked through in this video . 비디오에서 현재 구현을 무효화하는 몇 가지 방법도 보여줍니다.

동영상