HTML5 video Playback videos tag use "Go"

1, here is the simplest example of playing a video
(Controls property tells the browser to have a basic playback control)

<video src= "Hangge.mp4" controls></video>

2 , through width and the Height set the video window size

<video src= "Hangge.mp4" Controls Width= "height=" ></video>

3 , pre-load media files
Setting preload different property values tells the browser how to load a media file:
(1) The value is auto: Let the browser download the entire file automatically
(2) The value is none: The browser does not have to download the file beforehand
(3) The value is metadata: Let the browser first get the data block at the beginning of the video file, enough to determine some basic information (such as the total length of the video, the first frame image, etc.)

<!--users click Play to start the download-

<video src= "Hangge.mp4" Controls preload= "None" ></video>

4 , auto play
(1) Using the AutoPlay property allows the browser to play the video file as soon as it is finished loading.

<video src= "Hangge.mp4" Controls autoplay></video>

(2) If AutoPlay is enabled, the player can be set to the muted state. This will mute the AutoPlay and prevent users from getting bored. You can click the Player speaker icon to turn the sound back on if you want.

<video src= "Hangge.mp4" Controls AutoPlay muted></video>

5 , Loop play
Use the Loop property to let the video play at the end, and then play back from the beginning.

<video src= "Hangge.mp4" Controls loop></video>

6 , set up a picture of the replacement video (cover picture)
The poster property can be set, and the browser will use this image in the following three scenarios:
(1) The first frame of the video is not loaded.
(2) Set the Preload property to None
(3) The specified video file was not found

<video src= "Hangge.mp4" Controls poster= "Hangge.png" ></video>

7 , browser-compatible, how to make every browser to play video smoothly
Most browsers now support the video in the format of H. I, but the Opera browser has not supported it. We need back-up measures to ensure that everyone can see the video, usually with the following options:
( 1 ) use multiple video formats
The <video> and <audio> elements have a built-in format fallback system. Instead of using the SRC attribute, we nest a set of <source> elements inside it, and the browser chooses to play the first file it supports.
We can add WEBM format video to provide support for opera.

<video controls>

<source src= "Hangge.mp4" type= "Video/mp4" >

<source src= "HANGGE.WEBM" type= "VIDEO/WEBM" >

</video>

( 2 ) to add Flash Backup measures (recommended)
The above method is not recommended, the opera browser should only account for less than 1% of the share. Deliberately for it to transcode the video on the side too much trouble. It is also convenient to use Flash as an alternate playback scheme, while Flash is compatible with IE8, an old browser that the <video> element does not support.

Use FlowPlayer Flash as a backup player (local download: flowplayer-3.2.18.zip)

<video controls>

<source src= "Hangge.mp4" type= "Video/mp4" >

<source src= "HANGGE.WEBM" type= "VIDEO/WEBM" >

<object id= "FlowPlayer" width= "height=" 300 "

Data= "flowplayer-3.2.18.swf"

Type= "Application/x-shockwave-flash" >

<param name= "movie" value= "flowplayer-3.2.18.swf" >

<param name= "flashvars" value= ' config={"clip": "Hangge.mp4"} ' >

</object>

</video>

( 3 ) There are also priority use Flash , while HTML5 as a backup measure.
This is done because of the high flash penetration, and HTML5 as a backup to expand the ipad and iphone users

<object id= "FlowPlayer" width= "height=" 300 "

Data= "flowplayer-3.2.18.swf"

Type= "Application/x-shockwave-flash" >

<paramname= "movie" value= "flowplayer-3.2.18.swf" >

<paramname= "Flashvars" value= ' config={"clip": "Hangge.mp4"} ' >

<videocontrols>

<sourcesrc= "Hangge.mp4" type= "Video/mp4" >

<sourcesrc= "HANGGE.WEBM" type= "VIDEO/WEBM" >

</video>

</object>

More technical good text, attention to the public number "to kick genius"

HTML5 video Playback videos tag use "Go"