Added video tags, corresponding attributes, and API details for html5.

Added video tags, corresponding attributes, and API details for html5.

Knowledge description:

Not as good as front-end developers, but from the beginning to the end to understand the "Ten thousand miles from the ground up", the most important basic, HTML5 beginners, solid foundation of the first step, to sort out the most basic, leaving traces of their own learning. The video tags added to HTML5 are a valuable asset for you to sort out their attributes and use of APIs.

 

Video Tag:

 

I. video supports video formats:

The following are the three most common formats:

1. ogg format: Ogg files with Theora video encoding (free) + Vorbis Audio Encoding (free)

Supported browsers: firefox, chrome, and opera

2. MPEG4 format: MPEG4 files with H.264 video encoding (charged) + AAC audio encoding (charged)

Supported browsers: safari and chrome

3. Webm format: WebM format with VP8 video encoding (free of charge) + Vorbis Audio Encoding (free of charge)

Supported browsers: IE, firefox, chrome, and opera

Advantages: free, good compression (small), and good video quality

Disadvantage: few videos, few transcoders, and poor Transcoding

 

Ii. Tag prototype:

1. // specify a video format. If the video cannot be played, a prompt is displayed.

Code snippet:

<Video src = "***. mp4" controls = "controls">

Your browser does not support video tags. We recommend that you update your browser version.

</Video>

 

2. // specify multiple video formats. The browser selects which video format to play based on its support.

Note: For Multiple source tags, the browser starts to recognize the first one. If the first one is not recognized, the browser continues to recognize the second one. If the first one is successfully recognized, the first video format is directly played.

Code snippet:

<Video controls = "controls">

<Source src000000001.mp4 "type =" video/mp4 "/> // write the src attribute to the source tag. Specify the video type, for example, MP4 is named type = "video/mp4"

<Source src = g02.ogg "type =" video/ogg "/> // ogg format

<Source src = "3. webm" type = "video/webm"/> // webm format

</Video>

 

Iii. tag attributes:

Although some attributes are of the boolean type, we recommend that you follow the XHTML format (attribute name = "attribute value") to avoid errors (the following red bold attributes are common attributes)

Attribute	Value	Function Description
Controls	Controls	Whether to display the playback control
Autoplay	Autoplay	Set whether to enable the browser for automatic playback
Width	Pilex (pixels)	Set the player width
Height	Pilex (pixels)	Set the player height
Loop	Loop	Set whether to play the video cyclically (that is, Resume playback after playback)
Preload	Preload	Set whether to play after loading
Src	Url	Set the url of the video to be played
Poster	Imgurl	Set the default picture display for the player.
Autobuffer	Autobuffer	Set as browser buffer mode, valid only when autoply is not set

 

Iv. video tag API:

Video tags also provide user-friendly APIs for direct calling when writing JavaScript code, which is convenient and simple.

API	Event Description
Play	Video. play (); play a video
Pause	Video. pause (); pause video playback
Load	Video. load (); returns all attributes to the default value, and resumes the video
CanPlayType	Var support = videoid. canPlayType ('video/mp4'); determines whether the browser supports the current video format. Return Value: Empty string: not supported Maybe: may support Probably: fully supported

The video tag API is used in JS as follows:

<Button onclick = "isPlay (this)"> play </button>

<Button onclick = "replay ()"> replay </button>

 

<Script>

Var video = document. getElementById ('video'); // the id of the video label in parentheses

// Play the video (click the play button to pause)

Function isPlay (obj)

{

If (video. paused)

{

Obj. innerHTML = "paused ";

Video. play ();

} Else {

Obj. innerHTML = "play ";

Video. pause ();

}

}

 

// Pause the playback.

Function replay ()

{

Video. load ();

}

 

// Determine whether the current browser supports the video format to be played

Function isPlayType ()

{

Var support = video. canPlayType ("video/mp4 ");

Console. log (support); // return results: Null String, maybe (may be supported), probably (supported)

}

</Script>

 

V. video tag API attributes:

Video not only provides API interfaces, but also provides many API attributes to facilitate judgment in JS, as shown below:

API attributes	Event Description
Duration	Returns the total playback duration of the media, in seconds.
Loop	Loop playback?
Muted	Mute?
Paused	Paused or not
CurrentTime	Current playback time (unit: seconds)
Volume	Volume Value
NetworkState	Returns the current network status.
PlaybackRate	Playback speed (acceleration and playback speed reduction)
Src	URL of the current video source
Ended	Returns whether the current playback ends.
Error	Returns the error status of the current playback.
InitialTime	Returns the initial playback position.
MediaGroup	Media Group of the current audio and video (used to link Multiple audio and video tags)
Played	The time range (TimeRanges object) in which the current playback part has been played)
Preload	Whether to load audio and video simultaneously during page loading
ReadyState	Returns the current preparation status.
Seekable	Returns the time range (TimeRanges object) of the currently redirected part)
AudioTracks	Returns the list of available audio tracks (MultipleTrackList object)
Autoplay	Automatic playback after media Loading
Buffered	Returns the time range of the buffer part (TimeRanges object)
Controller	Returns the current MediaController object)
Controls	Display broadcast control controls
CrossOrigin	CORS settings
CurrentSrc	Returns the URL of the current media.
DefaultMuted	Mute by default
DefaultPlaybackRate	Default playback speed
Seeking	Returns whether the user performs a jump operation.
StartOffsetTime	Returns the current time offset (Date object)
TextTracks	Return available text tracks (TextTrackList object)
VideoTracks	Return available video tracks (VideoTrackList object)