미디어 요소는 오디오 및 비디오 기능을 구현할 수 있지만 모든 브라우저가 모두 지원하는 것은 아닙니다. 비디오 태그 및 오디오 태그용 코덱은 개발자가 많은 미디어 소스를 제공해야 함을 의미합니다. JavaScript API는 브라우저가 특정 형식과 코덱을 지원하는지 여부를 감지할 수 있습니다. 두 미디어 요소 모두 형식/코덱 문자열을 허용하고 "아마도", "아마도" 또는 ""(빈 문자열)을 반환하는 canPlayType() 메서드가 있습니다. 빈 문자열은 false 값이고 "아마도"와 "아마도"는 모두 참 값이므로 if 조건 테스트에서 true로 변환될 수 있으므로 if 판단의 조건으로 사용할 수 있습니다. 형식/코덱을 감지하는 방법은 다음과 같습니다.
JavaScript 코드
if(audio.canPlayType("audio/mpeg")){ //进一步编写 }
canPlayType( ) MIME 유형, 반환 값은 "아마도" 또는 빈 문자열일 가능성이 높습니다. 이는 미디어 파일 자체가 오디오 또는 비디오의 컨테이너일 뿐이기 때문입니다. 파일을 재생할 수 있는지 여부를 실제로 결정하는 것은 인코딩 형식입니다. MIME 유형과 인코더를 모두 전달하면 반환된 문자열이 "아마도"가 될 가능성이 높아집니다. 작은 예는 다음과 같습니다
HTML 코드
<audio src="meng.ogg" id="myAudio"></audio>
JavaScript 코드
var audio = document.getElementById("myAudio"); //很可能"maybe" if(audio.canPlayType("audio/mpeg")){ //进一步编写 } //可能是"probably" if(audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){ //进一步编写 }
코덱은 따옴표로 묶어야 합니다. 다음은 지원되는 오디오 형식 및 코덱에 대한 소개입니다.
AAC 형식: 문자열 오디오/mp4, codecs="mp4a.40.2" 지원되는 브라우저: IE9+, Safari 4+ 및 iOS용 Safari
MP3 형식: 문자열 오디오/ mpeg; : IE9+, Chrome
Vorbis 형식: 문자열 audio/ogg, codecs="vorbis"; 지원되는 브라우저: Firefox 3.5+, Chrome, Opera 10.5+
WAV 형식: 문자열 audio/wav, codecs="1"; 지원되는 브라우저: Firefox 3.5+, Opera 10.5+, Chrome
다음은 canPlayType()을 사용하여 비디오 형식 코덱을 감지하는 것입니다.
H.264 형식: 문자열 비디오/mp4, codecs="avc1.42E01E, mp4a.40.2"; 지원되는 브라우저: IE9+, Safari 4+, iOS용 Safari, Android용 Webkit
Theora: string video/ogg, codecs="theora"; 지원되는 브라우저: Firefox 3.5+, Opera 10.5+, Chrome
WebM: video/webm, codecs="vp8, vorbis" ;지원되는 브라우저: Firefox 4 +, Opera 10.6+, Chrome
네이티브 JavaScript에는 언제든지 오디오를 재생할 수 있는 A 생성자 함수 오디오가 있습니다. 시간. 둘 다 DOM 요소라는 관점에서 볼 때 Audio 객체는 Image 객체와 매우 유사하지만 Audio 객체는 Image 객체처럼 문서에 삽입될 필요가 없습니다. 새 인스턴스를 생성하고 오디오 소스 파일을 전달하기만 하면 됩니다. 작은 예는 다음과 같습니다.
JavaScript 코드
var audio = new Audio("meng.mp3"); audio.addEventListener('canplaythrough',function(event){ audio.play(); }, false);
새 오디오 인스턴스를 생성하여 지정된 파일 다운로드를 시작합니다. . 다운로드가 완료된 후 play() 메서드를 호출하여 오디오를 재생합니다. iOS에서는 play()를 호출하면 대화상자가 팝업되며, 사용자의 허락을 받아야만 재생이 가능합니다. 오디오 한 부분을 재생한 후 오디오의 반대쪽 끝을 재생하려면 onfinish 이벤트 핸들러에서 play() 메서드를 호출해야 합니다.
위 내용은 HTML5 실제 전투 내용과 미디어 요소 분석(4. 코덱 지원 및 오디오 생성자 테스트)에 대한 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고하시기 바랍니다. )!