> 웹 프론트엔드 > H5 튜토리얼 > HTML5 실제 전투 및 미디어 요소 분석 (4. 코덱 지원 및 오디오 생성자 감지)

HTML5 실제 전투 및 미디어 요소 분석 (4. 코덱 지원 및 오디오 생성자 감지)

黄舟
풀어 주다: 2017-02-13 13:45:41
원래의
1647명이 탐색했습니다.



HTML5 미디어 요소는 코덱 지원을 감지합니다.

미디어 요소는 오디오 및 비디오 기능을 구현할 수 있지만 모든 브라우저가 모두 지원하는 것은 아닙니다. 비디오 태그 및 오디오 태그용 코덱은 개발자가 많은 미디어 소스를 제공해야 함을 의미합니다. 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


 HTML5 미디어 요소의 오디오 생성자

네이티브 JavaScript에는 언제든지 오디오를 재생할 수 있는 A 생성자 함수 오디오가 있습니다. 시간. 둘 다 DOM 요소라는 관점에서 볼 때 Audio 객체는 Image 객체와 매우 유사하지만 Audio 객체는 Image 객체처럼 문서에 삽입될 필요가 없습니다. 새 인스턴스를 생성하고 오디오 소스 파일을 전달하기만 하면 됩니다. 작은 예는 다음과 같습니다.

 JavaScript 코드

var audio = new Audio("meng.mp3");
audio.addEventListener(&#39;canplaythrough&#39;,function(event){
	audio.play();
}, false);	
로그인 후 복사

새 오디오 인스턴스를 생성하여 지정된 파일 다운로드를 시작합니다. . 다운로드가 완료된 후 play() 메서드를 호출하여 오디오를 재생합니다. iOS에서는 play()를 호출하면 대화상자가 팝업되며, 사용자의 허락을 받아야만 재생이 가능합니다. 오디오 한 부분을 재생한 후 오디오의 반대쪽 끝을 재생하려면 onfinish 이벤트 핸들러에서 play() 메서드를 호출해야 합니다.

위 내용은 HTML5 실제 전투 내용과 미디어 요소 분석(4. 코덱 지원 및 오디오 생성자 테스트)에 대한 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고하시기 바랍니다. )!




관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿