HTML5 동영상 태그의 소스 변경: 종합적인 솔루션

범용 동영상 플레이어를 만들려면 소스를 동적으로 변경하는 문제를 해결해야 합니다. 비디오의. 이를 통해 사용자는 재생목록의 동영상 간에 전환할 수 있습니다. 여러 태그를 사용하는 이전 접근 방식은 한계에 직면했지만 이 기사에서는 단일 속성을 ​​사용하는 안정적인 방법을 제시합니다.

canPlayType()을 사용하여 파일 형식 식별:

비디오에 적합한 파일 형식을 결정하려면 canPlayType() 함수를 활용할 수 있습니다. 이 함수는 특정 미디어 유형에 대한 브라우저의 지원 수준을 나타내는 문자열을 반환합니다. 예:

var canPlayMP4 = video.canPlayType('video/mp4');
var canPlayWebM = video.canPlayType('video/webm');

canPlayType()의 결과에 따라

바닐라 JavaScript를 사용한 구현:

다음은 방법을 보여주는 코드 조각입니다. 바닐라 JavaScript를 사용하여 비디오 소스를 변경하려면:

var video = document.getElementById('video');

// Create a new source element
var source = document.createElement('source');

// Set the source attributes dynamically based on browser support
if (canPlayMP4) {
  source.setAttribute('src', 'video.mp4');
  source.setAttribute('type', 'video/mp4');
} else if (canPlayWebM) {
  source.setAttribute('src', 'video.webm');
  source.setAttribute('type', 'video/webm');
}

// Append the source to the video element
video.appendChild(source);

// Play the video
video.play();

이 접근 방식을 사용하면 여러 태그를 사용하는 데 따른 단점 없이 동적 소스 전환이 가능합니다. 또한 브라우저에서 지원하는 가장 적합한 형식으로 비디오가 재생되도록 보장합니다.