9.HTML Audio and video

Nineth Chapter Audio and video

First, the concept of audio and video

first, you need to understand two concepts: container (container) and Codecs ( codec )

1. Video container: The video file contains audio tracks, video tracks, and other meta-data.

video is tied to audio tracks and video tracks while playing

The main video formats are:. AVI/.FLV/.MP4/.MKV/.OGG/.WEBM

2, Codec: is a set of algorithms,

The mainstream audio decoder: Aac/mpeg-3/ogg/voribs

Video Decoder: H.264/vp8/ogg/theora

3, browser support situation

container Format     Video Decoder   audio encoding and decoding ie9+ firefox5+ chrome13+

WebM(Mainstream) VP8 Vorbis x√√

OGG() Theora Vorbis x√√

MPEG-4(best compatibility) H. AAC √x questions? (now supported, may not be supported later)

WebM not only high definition, but also free, unrestricted access to the use of source code and patent rights.

Second, video elements

1,src/width/height said above.

2,AutoPlay Set, the start to play the video immediately.

3.preload is set to pre-load the video.

* preload settings:preload has three properties,none means that the player does not load anything, the first frame does not load, only click into it will slowly load.

Metadata indicates that only metadata (width, height, first frame, and so on) can be loaded before playback.

Auto means requesting the browser to download the entire video as soon as possible. (It was already loaded before it was entered)

<video src= "HTTP://LI.CC/TEXT.WEBM" width= "640" height= "480" Controls preload></video>// When you go in, you cache the video content behind.

4,controls set, indicating the display playback control.

5 . After loop is set, it means to play video repeatedly.

6,themuted is set, the video is in mute state.

7.poster Specifies the picture displayed when the video data is loaded.

example One,<video src= "TEXT.WEBM" width= "640" height= "480" Controls AutoPlay Loop muted></video>

<video src= "TEXT.WEBM" width= "640" height= "480" Controls poster= " picture " ></video>// The picture when the video is not in point

* compatible with multiple browsers

example Two,<video width= "640" height= "480" controls>

<source src= "TEXT.WEBM" >}

<source src= "Text.mp4" >} you can write multiple video formats to ensure that playback is supported in most browsers

<source src= "Text.ogg" >}

</video>

Audio elements: In addition to not wide height, and video elements are basically the same.

PS: More JavaScript controls designed to the API will be explained later based on JavaScript .

Center your video horizontally on the page

<center><video class= "video" src= "Cehui.mp4" width= "640" height= "the" Controls loop preload poster= "..." ></video></center>

9.HTML Audio and video