[Javascript] Html video currentTime 수정 불가 해결

안녕하세요🫶 개발자 재민콩입니다!

 

이번엔 동영상 강의 사이트 개발 중 겪었던 오류에 대해 포스팅을 진행하려고 합니다.

해결은 됐지만, 더 나은 방법이 있는지 혹은 잘못된 지식인지 현명한 개발자분 지적 부탁드립니다🙇🏻‍♂️

 

발생된 문제는 video 강의를 업로드하고 사용자단에서 video를 불러올 경우

progress로 플레이 타임을 변경할 경우 시작으로(0초)로 돌아가고,

Javascript로 currentTime을 수정할 경우에도 같은 결과가 나왔습니다.

다만, Safari에서는 정상적으로 작동하고, firefox는 일부분, 제외 다른 브라우저에선 오류가 났습니다.

 

생각해 본 오류 이유로는 video를 load 하는 과정에서 문제가 있었던 것 같다고 결론을 내리고,

video를 미리 로드하거나, 다른 load 하는 방법이 있는지 찾아봤습니다.

 

요즘 유행하는 ChatGPT와 Google 선생님의 도움을 받아 여러 가지 시도를 해보았지만 실패를 했고,

 

다른 비디오 스트리밍 서비스를 하는 youtube, netflix는 어떻게 했을까 하고 마크업을 보던 중 video src가

blob: 로시작하는 url로 들어가 있는 걸 보고 blob가 뭔지 알아보았습니다.

 

ChatGPT가 친절하게 설명해 줬습니다. 아주 정확하게 저희가 필요로 하는 내용이었습니다.

 

그리하여 아래의 코드를 이용하여 video를 blob으로 불러와 video를 load 하는 방식으로 해당 오류를 해결했습니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', "url", true);
xhr.responseType = 'blob';

xhr.onload = () => {
  if (xhr.status === 200) {
    const blob = xhr.response;
    const src = URL.createObjectURL(blob);
    let $video = $('video');
    $video.attr('src', src);
    $video.find('source').attr('src', src);
    $video[0].load();
  }
};

xhr.send();