HTML5 actual combat and analysis of media elements (4. Detecting codec support and Audio constructor)

HTML5 media elements detect codec support

Although media elements can implement audio and video functions, they are not All browsers support all codecs for the video tag and the audio tag, which means developers have to provide many media sources. The JavaScript API can detect whether the browser supports a certain format and codec. Both media elements have a canPlayType() method that accepts a format/codec string and returns "probably", "maybe", or "" (the empty string). The empty string is a false value, and "probably" and "maybe" are both true values, so it can be converted to true in the if condition test, so it can be used as a condition for judgment in the if. The method to detect the format/codec is as follows

　JavaScript code

if(audio.canPlayType("audio/mpeg")){
	//进一步编写
}

If passed to canPlayType() A MIME type, the return value is likely to be "maybe" or an empty string. This is because the media file itself is just a container for audio or video. What really determines whether the file can be played is the encoding format. By passing in both a MIME type and an encoder, the likelihood increases that the returned string will become "probably". A small example is as follows

　HTML code

<audio src="meng.ogg" id="myAudio"></audio>

　JavaScript code

var audio = document.getElementById("myAudio");

//很可能"maybe"
if(audio.canPlayType("audio/mpeg")){
	//进一步编写
}

//可能是"probably"
if(audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
	//进一步编写
}

Codecs must be enclosed in quotes. Below we will introduce to you the audio formats and codecs that have been supported.

AAC format: string audio/mp4, codecs=”mp4a.40.2”; Supported browsers: IE9+, Safari 4+ and iOS version of Safari

MP3 format: string audio/ mpeg; Supported browsers: IE9+, Chrome

Vorbis format: string audio/ogg, codecs="vorbis"; Supported browsers: Firefox 3.5+, Chrome, Opera 10.5+

WAV format: string audio/wav, codecs="1"; Supported browsers: Firefox 3.5+, Opera 10.5+, Chrome

The following is the use of canPlayType() to detect the video format codec.

H.264 format: string video/mp4, codecs="avc1.42E01E, mp4a.40.2"; Supported browsers: IE9+, Safari 4+, Safari for iOS, Webkit for Android

Theora: string video/ogg, codecs="theora"; Supported browsers: Firefox 3.5+, Opera 10.5+, Chrome

WebM: video/webm, codecs="vp8, vorbis" ;Supported browsers: Firefox 4+, Opera 10.6+, Chrome

Audio constructor of HTML5 media elements

In native JavaScript, there are A constructor Audio that can play audio at any time. From the perspective of both being DOM elements, the Audio object is very similar to the Image object, but the Audio object does not have to be inserted into the document like the Image object. Just create a new instance and pass in the audio source file. A small example is as follows

　JavaScript code

var audio = new Audio("meng.mp3");
audio.addEventListener('canplaythrough',function(event){
	audio.play();
}, false);	

Create a new Audio instance to start downloading the specified file. After the download is completed, call the play() method to play the audio. In iOS, when calling play(), a dialog box will pop up, and playback cannot be played until the user's permission is obtained. If you want to play the other end of the audio after playing one piece of audio, you must call the play() method in the onfinish event handler.

The above is the content of HTML5 actual combat and analysis of media elements (4. Detecting codec support and Audio constructor). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!