HTML5 's video features

HTML5 's video features

1, the video on the Web

Until now, there is still no standard for displaying video on a Web page.

Today, most videos are displayed via plugins (such as Flash). However, not all browsers have the same plugin.

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

2. Video Format

Currently, the video element supports three types of videos:

Format	Ie	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Note:

OGG = Ogg file with Theora video encoding and Vorbis audio encoding

MPEG4 = MPEG 4 file with H + video encoding and AAC audio encoding

WebM = WebM file with VP8 video encoding and Vorbis audio encoding

3. Working mode

To display the video in HTML5, you need:

<video src= "Movie.ogg" controls= "Controls" ></video>

whichsrc= "Movie.ogg"Refers to the local address of the video;controls= "Controls"Refers to the control property, which is used to add play, pause, and volume controls.

If you want to set the width and height of the video, the content inserted between the,<video> and </video> is displayed for browsers that do not support video elements:

<video src= "Movie.ogg" width= "," "height=" controls= "controls" >your browser does not support the video tag.< ;/video>

Note:

The above example uses an Ogg file for Firefox, Opera, and Chrome.

To ensure that the video file must be of type MPEG4 for Safari browser.

The video element allows multiple source elements. The source element can link different video files. The browser will use the first recognizable format:

<video width= "height=" controls= "Controls" >  <source src= "Movie.ogg" type= "Video/ogg" >  <source src= "Movie.mp4" type= "Video/mp4" >your browser does not support the video tag.</video>

Note: InternetExplorer 8 does not support video elements. In IE 9, support for video elements that use MPEG4 is provided.

4. Properties of <video> tags

Property	Value	Describe
AutoPlay	AutoPlay	If this property appears, the video plays as soon as it is ready.
Controls	Controls	If this property appears, the control is displayed to the user, such as the play button.
Height	Pixels	Sets the height of the video player.
Loop	Loop	If this property appears, the media file starts playing again when it finishes playing.
Preload	Preload	If this property appears, the video loads when the page loads and prepares to play. If you use "autoplay", the property is ignored.
Src	Url	The URL of the video to play.
Width	Pixels	Sets the width of the video player.

5. HTML5 <video>-Control with DOM

HTML5 <video> elements also have methods, properties, and events.

The methods are used for playing, pausing, loading, and so on. The properties (such as length, volume, etc.) can be read or set. DOM events can inform you, for example, that the,<video> element starts playing, paused, stopped, and so on.

The simple method in the following example shows us how to use the <video> element, read and set properties, and how to invoke a method.

<! DOCTYPE html>
The above example calls two methods: Play () and pause (). It uses two properties at the same time: paused and width.
Operating effects such as:


6. HTML5 <video>-Methods, properties, and Events
The following is a list of the video methods, properties, and events supported by most browsers:

 
 

  
  
 
   
 
    
Method
 
    
Property
 
    
Event
 
   
 
   
 
    
Play ()
 
    
Currentsrc
 
    
Play
 
   
 
   
 
    
Pause ()
 
    
CurrentTime
 
    
Pause
 
   
 
   
 
    
Load ()
 
    
Videowidth
 
    
Progress
 
   
 
   
 
    
Canplaytype
 
    
Videoheight
 
    
Error
 
   
 
   
 
    
 
    
Duration
 
    
Timeupdate
 
   
 
   
 
    
 
    
Ended
 
    
Ended
 
   
 
   
 
    
 
    
Error
 
    
Abort
 
   
 
   
 
    
 
    
Paused
 
    
Empty
 
   
 
   
 
    
 
    
Muted
 
    
Emptied
 
   
 
   
 
    
 
    
Seeking
 
    
Waiting
 
   
 
   
 
    
 
    
Volume
 
    
Loadedmetadata
 
   
 
   
 
    
 
    
Height
 
    
 
   
 
   
 
    
 
    
Width
 
    
 
   
 
  
 
 

Note: In all properties, only the Videowidth and Videoheight properties are available immediately. Other properties are available after the video's metadata has been loaded.


HTML5 's video features