Chapter 4 audio and video-water source

Chapter 3 audio and video-original learning points of water:

1. Audio and Video Overview

2. video Element

3. audio elements

Lecturer: Li Yanhui

This chapter mainly discusses audio and video elements in HTML5. These two native media elements are used to embed audio and video into HTML pages.

I. Audio and Video Overview

First, we need to understand two concepts: container and codec ).

1.Video container

Audio or video files are only a container file. Video files contain audio tracks, video tracks, and other metadata. During video playback, the audio track and video track are bound together. Metadata includes the cover, title, subtitle, and Subtitle information of a video. Mainstream video containers support the following formats: .avi?.flv=.mp4=.mkv=.ogg and. webm.

2.Codecs

Audio and video encoding/decoding are a set of algorithms used to decode a specific audio or video so that the audio and video can be played. The size of the original media file is very huge. If the file is not encoded, the data volume is amazing. It will take an unbearable time to spread it on the Internet. If the file is not decoded, the encoded data cannot be reorganized into original media data. Mainstream audio codecs: AAC, MPEG-3, Ogg Voribs, video codecs: H.264, VP8, Ogg Theora.

3.Browser support

At first, the HTML5 specification was intended to specify the decoder, but it was extremely difficult to implement it. Some manufacturers already have their own standards and are reluctant to implement them. However, some codecs are protected by patents and are expensive to pay. Eventually, the requirements for unified standards were abandoned, resulting in various browsers implementing their own standards.

Container format	Video Coding/Decoding	Audio Codec	IE9 +	Firefox5 +	Chrome13 +
WebM	VP8	Vorbis	×	√	√
OGG	Theora	Vorbis	×	√	√
MPEG-4	H.264	AAC	√	×	Question?

In addition to the above three browsers, there are Safari5 + support MPEG-4, Opera11 support WebM and OGG, through this set of data, as long as the preparation of MP4 and OGG format, but for the new high definition standard WebM, of course it is very necessary. Because WebM is not only high-definition, but also free of charge, unrestricted use of source code and patent rights.

Currently, Chrome is used to promote video in WebM format. It claims that the H.264 encoding video will be abandoned in the future, so MP4 videos may not be played in future versions. Of course, the current demo version is supported.

II.VideoVideo Element

In the past, video playback was implemented only by using Flash plug-ins. However, the instability of Flash plug-ins often causes the browser to crash, so many browsers or system vendors began to abandon it. Instead, it is the video element of HTML5.

	Element attributes
Attribute name	Description
Src	Video resource URL
Width	Video width
Height	Video height
Autoplay	After the video is set, the video is played immediately.
Preload	Indicates that the video is preloaded.
Controls	After setting, the playback control is displayed.
Loop	After this parameter is set, the video is repeatedly played.
Muted	After the video is set, it indicates that the video is in the mute state.
Poster	Specifies the image displayed when video data is loaded.

1.EmbedWebMVideo

Explanation: Insert a video with the following video types: .webm,.mp4,.ogg. Src indicates resources

URL; width indicates width; height indicates height.

2.Additional attributes

Explanation: autoplay indicates that playback starts automatically; controls indicates that playback controls are displayed; loop indicates loop playback; muted indicates that playback is muted.

3.Preload settings

Explanation: The preload attribute has three values: none indicates that the player does not load anything; metadata indicates that metadata (width and height, first frame, and other information) can only be loaded before playback ); auto indicates requesting the browser to download the entire video as soon as possible.

4.Preview Graph

Explanation: The poster attribute indicates that a preview is made at the first frame of the video.

5.Compatible with multiple browsers

     
      
      
      
  The flash Player is introduced below IE9, but it is unnecessary.
 

Explanation: PassMultiple formats of video are introduced to make more browsers compatible.

II.AudioAudio Element

Like the video element, the audio element is used to embed the audio content, and the attributes of the audio element are similar to those of the video element. The audio support is similar to that of the video.You can introduce multiple formats for compatibility. Mainstream audio formats include .mp3,.m4a,.ogg,.wav.

Attribute name	Description
Src	Video resource URL
Autoplay	After the video is set, the video is played immediately.
Preload	Indicates that the video is preloaded.
Controls	After setting, the playback control is displayed.

1.Embed an audio file

Explanation: it is the same as embedding a video.

2.Compatible with multiple browsers

Explanation: omitted.

PS: More JavaScript controls designed for APIS will be explained in the future based on JavaScript.