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

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

범용 비디오 플레이어를 만들려면 동적으로 브라우저 호환성을 고려하는 것이 중요합니다. 비디오 소스를 변경합니다.

문제

여러 <소스>

해결 방법

이 문제를 해결하려면

구현 예

다음 JavaScript 코드는 동적으로 변경하는 프로세스를 보여줍니다. src 속성과 canPlayType() 함수를 사용하여 비디오 소스를 생성합니다.

var video = document.getElementById('video');
var source = document.createElement('source');
var supported = video.canPlayType('video/mp4');
if (supported == '' || supported == 'no') {
  supported = video.canPlayType('video/webm');
}
if (supported != '' && supported != 'no') {
  source.setAttribute('src', 'path/to/video.' + supported.replace('video/', ''));
  source.setAttribute('type', supported);
  video.appendChild(source);
  video.load();
  video.play();
} else {
  alert('Video file not supported.');
}

이 접근 방식은 소스 변경 프로세스를 통해 브라우저 간 호환성을 보장하고 일관된 비디오 재생 환경을 제공합니다.

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