Introduction to the new properties of HTML5 Audio and Video

Preface: the use of Audio and video in HTML5 is relatively simple, but it is more complex, the method attributes are many. If it's almost impossible to remember, even some people have difficulty distinguishing between different properties and methods, let alone applying them. Here's a brief summary of how audio and video are used, which is a rough outline. As for the specific use of the method can be found online, more than the summary.

HTML5 Audio and Video benefits

1. As a native browser support, no need to install any third-party plugins

2, HTML5 specification provides a complete set of multimedia scripting Control API, developers can easily use the script to control the content of playback.

HTML5 Audio and Video defects

1, codec can not be unified, the different browsers must be classified processing, which is the biggest flaw in the HTML multimedia specification

2. Limited by the sharing of HTTP cross-source resources

3, full-screen video can not be controlled through scripting, mainly from a security perspective, script elements to control the full-screen video has a large vulnerability.

4. Access to audio and video two multimedia elements has not been fully added to the specification.

5. When playing complex video streams, the resource consumption is too large.

6, no bit rate switch standard, can not be normal, high-definition, full-clear video between the switch.

7. The camera and microphone are not supported at this stage.

8, in the external network embedded video, far less than flash convenience.

Of course, these are only the typical defects of the present, I believe in the near future, HTML5 will be further improved!

HTML5 Audio and video usage

First, browser support situation

Summary: Detects whether the user's browser supports HTML5 Audio and Video

1 functionload () {2     varVideo = document.createelement ("video");3     if(typeof(Video.canplaytype)) {4Alert ("Support! ");5}Else{6Alert ("Not supported! ");7     }8 }9Window.addeventlistener ("Load", load,false);

element tags and their simple properties

Summary: Simply list the properties and introduction of the multimedia element tag audio and video, as follows:

SRC: Used to specify the source address of the multimedia file

AutoPlay

Loop

Muted:

Controls

Crossorigi:

Poster

MediaGroup:

Preload:

Width

Height

Videowidth:

Videoheight:

Third, source sub-label and its use

Summary: The source tag is used to set up multiple multimedia file resources, and the browser will select its supported multimedia files from multiple multimedia file resources to play, with the following usage and tag properties:

<controls= "Controls">     Sorry, your browser does not support HTML5 Audio and video!     < = " test_video.ogv"><         = "Test_video.mp4" > </ Video >

The source child tag has three properties:

SRC: Required, specify multimedia file address

Media: Optional, to specify whether the user's browser is valid for a specific media resource. (Media is used to set how the multimedia can be played on the browser.) )

1    Media attribute value                        //Description 2Handheld:                            //Indicates that the media file is only valid on a handheld device, and by default it is all 3 all and( min-device-height:600px):    //Indicates that the media file is valid for 4 all and (min-device-width:600px) only when the minimum height of the browser reaches 600px :      //Indicates that the media file is valid only when the minimum width of the browser reaches 600px

Type: optional, used to specify the video container and codec that references the multimedia resource.

1        Type property value                               description 2video/webm;codecs = "Vp8,vorbis"               represents VP8 video codec and Vorbis audio codec in WEBM video container  3video/ogg;codecs = "Theora,vorbis"             means the Theora video codec and Vorbis audio codec in the Ogg video container 4 video/mp4;codecs = "avc1.42e01e,mp4a.40.2"     represents the 5 video codec and ACC audio codec in the basic MEPG-4 video container  Video/mp4;codecs = "avc1.64001e,mp4a.40.2"     represents a high-quality, MEPG-4 video codec and ACC audio codec in a visual container

Four, the time control of multimedia elements

Summary: Players will be in different states at different times, in order for developers to easily capture these states, HTML5 Audio and Video provide a series of event properties, as follows:

Onloadstart:

OnProgress:

Onsuspend:

Onabort:

OnError

Onemptied:

Installed:

Onloadedmetadata:

Onloadeddata:

Oncanplay:

Oncanplaythrough:

Onseeking:

Onseeked:

Onplaying:

Onended:

Onwaiting:

Ondurationchange:

Ontimeupdate:

Onplay:

OnPause

Onratechange:

Onvolumechange:

V. Network Status of MULTIMEDIA elements

Summary: Explore the constants, properties, and methods associated with network state in the htmlmediaelement (including audio and video), as follows:

Network_empty constants:

Network_idle constants:

Network_loading constants:

Network_no_source constants:

Networkstate:

SRC attribute:

CURRENTSRC Properties:

Crossorigin Properties:

Preload properties:

Load property:

Buffered properties:

Canplaytype () Method:

Vi. ready state of multimedia elements

Summary: Explore the constants and attributes in the htmlmediaelement (including audio and video) interfaces that are relevant to the ready state, as follows:

Have_nothing constants:

Have_metadata constants:

Have_current_data constants:

Have_future_data constants:

Have_enough_data constants:

ReadyState Properties:

Seeking properties:

Vii. abnormal state of multimedia elements

Summary: In the Htmlmediaelement interface, provide an error property to represent the exception that occurs during the process of processing multimedia resources by the browser. In fact, this error property is a Mediaerror interface. (The current support situation is still very imperfect, only IE9 support). This section discusses the constants and attributes in the Mediaerror object, as follows:

Media_err_aborted constants:

Media_err_network constants:

Media_err_decode constants:

Media_err_src_not_supported constants:

Code Property:

Viii. playback Status of multimedia elements

Summary: In the Htmlmediaelement interface, a series of properties and methods are provided to obtain playback status information for the player, and this section focuses on these properties and methods, as follows:

CurrentTime:

Duration

Paused

Defaultplaybackrate:

Playbackrate:

Played:

Seekable:

Ended

AutoPlay

Loop

Paly () Method:

Pause () Method:

Ix. control buttons for multimedia elements

Summary: In the Htmlmediaelement interface, several properties of the Player control buttons are also available, this section discusses the specific use of the properties related to the play button, as follows:

Controls

Volume

Defaultmuted:

Muted:

Summary: Remember the corresponding method attributes, learn to apply and find.

Reference book: "HTML5 +CSS3 Technology Application"

Not finished to add ing .....

Introduction to the new properties of HTML5 Audio and Video