Video.js에서 XHR fetch 기능 재정의 또는 확장하기

게시 2023/08/23

By ertsdf3300 2 분읽는 시간

문제 소개

개발자들이 자주 직면하는 문제 중 하나는 외부 라이브러리나 프레임워크의 기본 기능을 변경하거나 확장해야 할 때입니다. Video.js는 웹에서 동영상을 재생하는 데 널리 사용되는 JavaScript 라이브러리입니다. 이 라이브러리의 기본 XHR (XMLHttpRequest) fetch 기능을 변경하려는 경우에 어떻게 해야 하는지 알아보겠습니다.

XHR (XMLHttpRequest) 이란?

XHR이란 웹 브라우저와 웹 서버 간에 비동기적으로 (페이지 새로고침 없이) 데이터를 주고받을 수 있는 API입니다. 이를 통해 서버에서 새로운 정보를 가져오거나 데이터를 보낼 수 있습니다.

Video.js에서 XHR fetch 기능 변경하기

오버라이드 (Override)

오버라이드란 기존에 있던 함수나 메소드를 덮어씌워 새로운 기능을 구현하는 것을 의미합니다. Video.js에서는 videojs.Hls.xhr.beforeRequest 옵션을 사용해 기본 XHR fetch 기능을 오버라이드할 수 있습니다.

  
videojs.Hls.xhr.beforeRequest = function(options) {
  // 여기서 options를 변경
  return options;
};

확장 (Extend)

확장이라는 것은 기존 기능에 추가적인 기능을 더하는 것입니다. Video.js에서는 기본 XHR fetch 기능을 그대로 두고, 새로운 기능을 추가할 수 있습니다.

  
const originalBeforeRequest = videojs.Hls.xhr.beforeRequest;
videojs.Hls.xhr.beforeRequest = function(options) {
  // 원래 함수 호출
  const newOptions = originalBeforeRequest(options);
  // 여기서 newOptions을 변경
  return newOptions;
};

요약

Video.js의 기본 XHR fetch 기능을 변경하거나 확장하기 위해서는 videojs.Hls.xhr.beforeRequest 옵션을 사용할 수 있습니다. 오버라이드는 기존 기능을 완전히 덮어쓰는 방법이고, 확장은 기존 기능에 추가적인 기능을 더하는 방법입니다. 이 두 가지 방법을 통해 원하는 기능을 손쉽게 추가할 수 있습니다.

JavaScript