Media elements of HTML5 practice and Analysis (4. Support for detecting codecs and Audio constructor)

HTML5 media element detection support for codecs

Although media elements can implement audio and video functions, not all browsers support video tags and audio tags. This means that developers must 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 receives a format/decoder string and returns "probably", "maybe", or "(Null String ). A null string is a false value, while "probably" and "maybe" are both true values. Therefore, if conditions can be converted to true in the test. Therefore, if conditions can be used as conditions for determination. The method for detecting the format/decoder is as follows:

　　JavaScript code

If (audio. canPlayType ("audio/mpeg") {// further WRITING}

If canPlayType () is input as a MIME type, the return value may be a "maybe" or an empty string. This is because the media file itself is only a container of audio or video, which determines whether the file can be played or the encoding format. When the MIME type and encoder are imported at the same time, the possibility will increase, and the returned string will become "probably ". Example

　　HTML code

　　JavaScript code

Var audio = document. getElementById ("myAudio"); // it is very likely that "maybe" if (audio. canPlayType ("audio/mpeg") {// further WRITING} // It may be "probably" if (audio. canPlayType ("audio/ogg; codecs = \" vorbis \ "") {// further WRITING}

The codecs must be enclosed in quotation marks. The following describes the supported audio formats and codecs.

AAC format: String audio/mp4, codecs = "mp4a. 40.2"; supported browsers: IE9 +, Safari 4 +, and Safari for iOS

MP3 format: String audio/mpeg; supported browsers: IE9 + and 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 uses canPlayType () to detect video format codecs.

H.264 format: String video/mp4, codecs = "avc1.42E01E, mp4a. 264"; 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 for HTML5 media elements

In the native JavaScript, there is a constructor Audio that can play Audio at any time. From the perspective of DOM elements, the Audio object is similar to the Image object, but the Audio object does not have to be inserted into the document as the Image object does. You only need to create a new instance and input the audio source file. Example

　　JavaScript code

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

You can create a new Audio instance to download the specified file. After the download is complete, call the play () method to play the audio. In iOS, when play () is called, a dialog box is displayed, which can be played only after the user's permission is obtained. If you want to play the other end of the audio after playing an audio clip, you must call the play () method in the onfinish event handler.

Media elements of HTML5 practice and Analysis (4. Support for detecting codecs and Audio constructor) are all described. If you need to fully simulate Audio or video, you can create an Audio object without creating tags on the page. For more information about HTML5, please stay tuned for the latest HTML5 update on Menglong xiaozhan.