HTML5 Video Playback <video>

Video playback in the HTML5

=====================================================================

<video>

-------do not need to download any additional browser video playback plugins

-------decoding and playback of video completely by the browser itself

<video src= "" Controls poster= "Xx.jpg" ></video>

-----The properties of the-video tag ---------

controls display the video playback control (Boolean property)

AutoPlay Auto-play video after page load (Boolean property)

preload---1.none video playback, the browser does not pre-download video resources, users do not click Play, will save bandwidth

2.metadata video playback, the browser does not pre-download video resources, but will get the metadata of the resources (video size,

Duration, video format, first few frames.

3.auto (default) The browser is dynamically determined according to the actual situation.

If the AutoPlay property is set, the value of the Preload property is ignored

muted Mute playback (boolean property)

loop Auto Loop Playback (Boolean property)

poster Setting the cover of a video

Width height

---------------------------------------The format of the video file--------------------------------------

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/80/05/wKiom1c0S1mi0MovAAGzaa_stL8467.png "title=" The format of the video file. png "alt=" Wkiom1c0s1mi0movaagzaa_stl8467.png "/>

---------------------------------------------------------------------

HTML5 provides the source tag , and the browser looks for the source element from top to bottom until it finds a format that it can play

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/80/05/wKiom1c0Stug9Hy8AADRIhDMQIk949.png "title=" Source.png "alt=" Wkiom1c0stug9hy8aadrihdmqik949.png "/>

For each source element, the browser loads the metafile of the video file to see if the video can be played, which can be time consuming.

Solution:

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/80/02/wKioL1c0S_2TLURHAAF8jvxYZYc185.png "style=" float: none; "title=" resolves. png "alt=" Wkiol1c0s_2tlurhaaf8jvxyzyc185.png "/>

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/80/02/wKioL1c0S_6TVuMRAAIayRL_8R4359.png "style=" float: none; "title=" resolves 2.png "alt=" Wkiol1c0s_6tvumraaiayrl_8r4359.png "/>

Compatible with all browsers:

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/80/05/wKiom1c0SzPBZRgGAAIgglNrWWE161.png "title=" Compatible with all browsers. png "alt=" Wkiom1c0szpbzrggaaigglnrwwe161.png "/>

HTML5 Video Playback <video>