브라우저 호환성 문제 없이 HTML5에서 비디오 소스를 동적으로 변경하는 방법은 무엇입니까?

HTML5에서 비디오 소스를 동적으로 변경

문제 설명

HTML5

해결책

이 문제를 극복하려면 canPlayType() 함수를 사용하는 다음 접근 방식을 고려하십시오.

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

function changeSource(newUrl) {
  // Remove existing `<source>` tags
  while (video.children.length > 0) {
    video.removeChild(video.children[0]);
  }

  // Create a new `<source>` tag with the new URL
  const source = document.createElement('source');
  source.src = newUrl;

  // Determine the appropriate MIME type using `canPlayType()`
  const mimeType = video.canPlayType('video/mp4') ? 'video/mp4' : 'video/webm';
  source.type = mimeType;

  // Append the new `<source>` tag to the video element
  video.appendChild(source);

  // Reload the video
  video.load();
  video.play();
}

설명

이 해결 방법 기존 태그를 만들고, 원하는 URL로 새 태그를 만들고, canPlayType()을 사용하여 적절한 MIME 유형을 결정합니다. 그런 다음 새 소스가 비디오 요소에 추가되고 비디오가 다시 로드됩니다. 이 접근 방식은 Chrome과 Firefox 모두에서 효과적으로 작동합니다.

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