Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

[beecomci]

video Uncaught (in promise) 오류

Case 1

• 오토플레이 영상 클릭시 재생 중이던 오토플레이 영상을 일시중지하고 본편 영상을 재생하는 스펙
• 오토플레이 영상 정보가 충분히 불러와지기도 전에 or 재생되기도 전에 클릭시, video.pause() 코드로 인해 오류 발생

// AS-IS
this.previewVideo.addEventListener('click', event => {
  this.previewPlayer.pause();
  this.playVideo(true);
});

// TO-BE
this.previewPlayer.addEventListener('play', event => {
  this.previewVideo.addEventListener('click', event => {
    this.previewPlayer.pause();
    this.playVideo(true);
  });
});

• play : 영상 재생 요청이 성공했을 때 발생하는 이벤트
• play 이벤트 발생시에만 오토플레이 영상 클릭시 본편 영상 재생되도록 수정

Case 2

• Case 1과 마찬가지로 autoplay 설정된 영상 로드 후, 일시적으로 pause()하고 재생 시점이 되면 다시 play()함
• autoplay 설정된 순간에는 play()된 상태인데, 그 이후 일시적으로 pause()한 시점이 순서대로 되지 않아 iOS에서 영상이 계속 중지되어 있음
• play()시에 Promise를 반환하는데, fulfilled되야 play() or pause() 이행하고 아니면 에러 반환
• 아래와 같이 play()가 반환하는 Promise가 성공했을 때만 pause() 되도록 수정

// AS-IS
this.corePlayer.pause();

// TO-BE
const playPromise = this.corePlayer.play();

if (playPromise !== undefined) {
  playPromise
    .then(() => {
      this.corePlayer.pause();
    })
     catch(error => {
      console.err(error);
    }) 
}

참고

• https://developers.google.com/web/updates/2017/06/play-request-was-interrupted