HTML5 Advanced -4 HTML5 Video processing (video playback in H5, programming for video player)

First, play the video in the HTML5

Play Video in HTML5

-Most of the HTML5 mentioned is video processing, which is also an important application in the Internet. In HTML5, an element is added to insert and play the video in the HTML document, which is the element

-The video element provides play, pause, and volume controls to control the video, and also provides the width and Height properties to control the size of the videos. such as the height and width of the set.

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/3B/wKiom1b6FmnhoXPHAAAj6EBVNZk366.png "title=" Web.png "alt=" Wkiom1b6fmnhoxphaaaj6ebvnzk366.png "/>

-Use video elements to provide at least two videos in the format of files: Ogg and MP4

-OGG: Includes Theora video and Vorbis Audio decoder

-MP4: Using H. + video and ACC Audio decoder

-WebM: With VP8 video and Ogg Vorbis Audio decoder

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/37/wKioL1b6GL3DRqLiAABzfRUnjcE979.png "title=" Web.png "alt=" Wkiol1b6gl3drqliaabzfrunjce979.png "/>

Video element

-Video elements can be embedded in the HTML page content, the element's properties can be set whether the auto-play, preload and video high and wide, etc.

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/3B/wKiom1b6GOOhnhAlAACD8hkJ4XI619.png "title=" Web.png "alt=" Wkiom1b6goohnhalaacd8hkj4xi619.png "/>

-The source element can be used in the video element to provide alternative video formats to the browser

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7E/3B/wKiom1b6GWCQm4YPAABVJQ-35zI209.png "title=" Web.png "alt=" Wkiom1b6gwcqm4ypaabvjq-35zi209.png "/>

-the SRC attribute in the source element works the same as the SRC attribute of the video element, which is used to read the media file

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/3B/wKiom1b6Gaey81KyAAAw28DVQxM686.png "title=" Web.png "alt=" Wkiom1b6gaey81kyaaaw28dvqxm686.png "/>

Video Properties

-The video element has the following properties

-CONTROLS: This property is a video element-specific property that shows the browser-provided control buttons

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/3B/wKiom1b6Gh-RzUVsAABLXendQmI759.png "title=" Web.png "alt=" Wkiom1b6gh-rzuvsaablxendqmi759.png "/>-AutoPlay: When this property is set, the video plays automatically after loading

-The video element has several properties in addition to the Controls property:

-Poster: This property specifies a URL that displays an image while the video is waiting to be played

-Preload: This property can be set to a value of three

None: Video is not cached, in order to reduce unnecessary traffic

Metadata: Load only the height and width of the video before playback

Auto: Default, requires the browser to download video as quickly as possible

-Loop: When setting this property, the browser will play the video repeatedly

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/3B/wKiom1b6HcuBRWdrAANQ8ErX34o557.png "title=" Web.png "alt=" Wkiom1b6hcubrwdraanq8erx34o557.png "/>

Second, the programming realization Video player

Event

-with video code implemented in different browsers, there are some differences in the graphics design of the player controls. Each browser has its own special buttons and progress bars, and even some special features. To keep the browser display consistent, you need to use the new video events, properties, and methods supported by HTML5 to stay consistent

-HTML5 added the new event API. In video and audio processing, HTML5 contains events that notify the state of the media, such as download progress, whether the video is over, etc.

-Here are some common events

-Progress: The download progress used to update the media will be triggered periodically

-Canplaythrough: The entire event is triggered when the entire media is able to play smoothly

-Canplay: Regardless of the overall state, as long as the download of a certain can be placed frame will trigger the entire event

-ended: triggered when the media reaches the end

-Pause: Triggered when media is paused

-Play: Triggered when media starts to play

-Error: Triggered when media playback errors occur

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/3C/wKiom1b6IjPTyrmmAAGGtmL09cE230.png "title=" Web.png "alt=" Wkiom1b6ijptyrmmaaggtml09ce230.png "/>

Method

-The following is a new addition to HTML5 media processing methods

-Play (): Play media file

-Pause (): Pause playback

-Load (): Loads the media file, which the dynamic application can use to load ahead of time

-Canplaytype (type): Check whether the browser supports media files in this file format

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/37/wKioL1b6JLuDSz6CAAGVlgz9UMc426.png "title=" Web.png "alt=" Wkiol1b6jludsz6caagvlgz9umc426.png "/>

Property

-HTML5 new processing attributes for video elements are as follows:

-Paused: The media is in a paused or not playing state, this value is true

-Ended: This value is true if the media has finished playing

-Duration: Returns the media length, in seconds

-CurrentTime: Gets or sets the media playback location

Summary: This chapter mainly introduces the next HTML5 video processing (playing video in H5, programming to implement video player)

This article from the "Technical Exchange" blog, declined reprint!

HTML5 Advanced -4 HTML5 Video processing (video playback in H5, programming for video player)