브라우저 호환성을 유지하면서 HTML5 비디오 소스를 동적으로 전환하는 방법은 무엇입니까?

HTML5 비디오를 위한 동적 소스 전환

HTML5 비디오 요소를 활용하면 다양한 플랫폼에서 비디오 재생을 위한 다목적 솔루션이 제공됩니다. 그러나 재생 목록이나 메뉴를 통합하려면 비디오 소스를 동적으로 변경해야 합니다. 순진하게 태그는 간단해 보이지만 브라우저 호환성은 문제를 야기합니다.

구체적으로 Firefox에서는 여러 load() 메소드를 사용하는 태그는 비디오 플레이어를 갑자기 종료합니다. 따라서 보다 안정적인 접근 방식은

바닐라 JavaScript 솔루션

비디오 소스를 동적으로 전환하려면 다음 바닐라 JavaScript 스니펫을 고려하세요.

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

source.setAttribute('src', 'video-url.mp4');
source.setAttribute('type', 'video/mp4');

video.appendChild(source);
video.play();

setTimeout(() => {
  video.pause();

  source.setAttribute('src', 'video-url.webm');
  source.setAttribute('type', 'video/webm');

  video.load();
  video.play();
}, 3000);

호환성 고려 사항

제공된 솔루션은 Chrome에서 잘 작동하지만 다른 브라우저 간의 호환성은 확인되었습니다. 또한 일관된 사용자 경험을 보장하려면 브라우저별 처리를 통합하는 것이 좋습니다.

위 내용은 브라우저 호환성을 유지하면서 HTML5 비디오 소스를 동적으로 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!