HTML5 Video and Audio

HTML5 provides a standard way to include video through the <video> element.

HTML5 specifies the standard for embedding audio elements on a Web page, that is, the use of <audio> elements.

Next look at a piece of code, right is so simple, HTML5 video, audio implementation is the following two paragraphs HTML5 markup language. (Put it in your

<video width="320" height="240" controls>    <source src="movie.mp4" type="video/mp4">    <source src="movie.ogg" type="video/ogg">    您的浏览器不支持 HTML5 video 元素。
</video>

<audio controls>    <source src="music.ogg" >    <source src="music.mp3" >    您的浏览器不支持HTML5 audio 元素。
</audio>

Video elements:

The <video> element provides play, pause, and volume controls to control the video.

The <video> element element also provides the width and Height properties to control the size of the video. If you set the height and width, the required video space is retained when the page loads. If you do not set these properties and the browser does not know the size of the video, the browser will not be able to load a specific space, the page will vary depending on the size of the original video.

The content inserted between <video> and </video> tags is presented to browsers that do not support video elements.

The <video> element supports multiple <source> elements. <source> elements can be linked to different video files. The browser will use the first recognizable format.

<video> elements support three video formats: MP4, WebM, Ogg.

Audio elements:

The control property is used to add play, pause, and volume controls.

Between <audio> and </audio> you need to insert the hint text of the <audio> element that the browser does not support.

The <audio> element allows multiple <source> elements to be used. The <source> element can link different audio files, and the browser will use the first supported audio file.

The <audio> element supports three audio format files: MP3, Wav, and Ogg.

Next look at a HTML5 Markup Language:

<video width="320" height="240" controls src="movie.mp4" type="video/mp4">您的浏览器不支持 HTML5 video 元素。</video>
<audio controls src="music.mp3">您的浏览器不支持HTML5 audio 元素。</audio>

This is also possible to achieve video, audio effects, but the limitations of such writing is reflected, the SRC attribute can only introduce a file format. Because different browser manufacturers use video, audio codec is not the same, if we only define a video, audio format, is not recognized in some browsers, then the <source> element is to solve the problem. Use the <source> element to introduce multiple different formats for the same video and audio, so that they can be identified in different browsers. The browser will use the first recognizable format.

HTML5 Audio/video Property (media Element)

Below introduces the concept of a video container :

<video>, <audio> is a set of data containers, which is similar to compressing a set of files (including audio tracks, video tracks, metadata: cover, title, letters, etc., format:. avi,. flv,. mp4,. mkv,. OGV, etc.). These files are very large, such as the page in the loading of a larger picture may also take a few seconds, not to mention the audio, video files! Without any processing, the loading time of audio and video is not so simple.

In fact, in our browser embedded in an audio, video codec , it is the role of the original very large video container, added when encoding, playback when decoding.

• Video Codec
  H. VP8, Oggtheora

• Audio Codec
  AAC, MPEG-3, Oggvorbis

HTML5 Video and Audio