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

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();
}