Shulou(Shulou.com)06/01 Report--

This article mainly introduces the HTML5 Video attributes and custom player example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

How to use it:

Your browser does not support the video tag.

Video >

Current support for html5 video format by browsers:

Browser | Audio and video format Ogg Theora MP4 (H.264) WebM

Microsoft Internet Explorer9 × √ ×

Mozilla Firefox5+ √ × √

Google Chrome13+ √

Apple Safari5+ × √ ×

Opera11+ √ × √

List of attributes:

If this attribute appears in autoplay autoplay, the video will play as soon as it is ready. Default is false

Controls controls if this property appears, the control is displayed to the user, such as a play button. These controls are provided by browsers, and the styles may vary from browser to browser.

Height pixels sets the height of the video player.

If this attribute appears in loop loop, the playback starts again after the media file has finished playing.

Preload none 、 metadata 、 auto

If this property appears, the video is loaded when the page is loaded and ready to play. If "autoplay" is used, this attribute is ignored.

Auto-load the entire video when the page is loaded

Meta-partially preloaded. Use this property value to indicate that the page maker believes that the user does not expect the video, but provides the user with some metadata (including size, first frame, track list, duration, etc.)

None-No preloading occurs. Using this property value, it may be because the page maker thinks that the user does not expect this video, or reduces the number of HTTP requests

The URL of the video to be played by src url.

Poster url preview media properties are generally used for js operations

Attribute readable status description

Error read-only

Use media.error to return a MediaError object that indicates the current error status, and if there is no error, return null, with a total of four possible values.

MEDIA_ERR_ABORTED (numeric value 1): media resource acquisition exception

MEDIA_ERR_NETWORK (numeric value 2): network error

MEDIA_ERR_DECODE (numeric value 3): media decoding error

MEDIA_ERR_SRC_NOT_SUPPORTED (numeric value 4): video format is not supported.

CurrentSrc only returns the value of the src attribute of the media label

NetworkState only returns the network status of the media, with a total of four possible values.

NETWORK_EMPTY (numeric value 0): not initialized yet

NETWORK_IDLE (numeric value 1): loading completed, network idle

NETWORK_LOADING (numeric value 2): video loading

NETWORK_NO_SOURCE (numeric value 3): failed to load.

Preload can read and write to get or change the value of the preload attribute of the media tag

Buffered only returns a TimeRanges object to confirm that the browser has cached the media file

ReadyState read-only

Returns the ready state of the media's current playback position, with a total of 5 possible values.

HAVE_NOTHING (numeric value 0): there are no valid media resources in the current playback position

HAVE_METADATA (numeric value 1): the media resource is confirmed to exist while loading, but the current location cannot be loaded into valid media data for playback.

HAVE_CURRENT_DATA (numeric value 2): the current playback data has been obtained, but there is not enough data to play

HAVE_FUTURE_DATA (numeric value is 3): the subsequent playback data has been obtained and can be played.

HAVE_ENOUGH_DATA (numeric value 4): can be played, and the browser confirms that the media data is loaded at a certain speed, which ensures that there is enough subsequent data to play without causing the browser's playback progress to catch up with the end of the loaded data.

Seeking only returns a Boolean value indicating whether the browser is requesting data, ture indicates that the browser is requesting data, and false indicates that the browser has stopped requesting data.

Seekable plays a read-only TimeRanges object, indicating that the current media resource can be requested.

CurrentTime can read and write to get or change the playback position of the video. In seconds

StartTime read-only returns the start time of media file playback, usually 0

Duration only returns the total playback time of the media file.

Played only returns a TimeRanges object indicating the range of media resources played by the browser

Paused only returns a Boolean value indicating whether the media pauses to play, ture indicates that the media pauses, and false indicates that the media is playing.

Ended only returns a Boolean value indicating whether the media has ended. Ture indicates that the media has finished playing, and false indicates that it has not finished playing yet.

DefaultPlaybackRate can read and write to return the default playback rate of the media, or assign a value to it to change the default playback rate of the media.

PlaybackRate can read and write to return the current media playback rate, or assign a value to it to change the current media playback rate

Autoplay read / write returns a Boolean value indicating whether the current media is set for auto playback. Ture indicates that the current media is auto playback, false indicates non-auto playback, or assigns a value to it. Set whether auto playback is set.

Loop returns a Boolean value indicating whether looping is set for the current media. Ture indicates that looping is set for the current media, and false indicates that circular playback is not set or assigned to it.

Controls returns a Boolean value indicating whether the current media uses the browser's default playback control bar. Ture means it is loaded. False means it is not loaded or assigned to it. Set whether to use the browser's default playback control bar.

Volume readable and writable returns the volume value of the current media, or assigns a value to it, changing the playback volume of the media, ranging from 0 to 1. 0 equals mute, and 1 is the maximum volume.

Muted returns a Boolean value indicating whether the current media playback is muted. Ture indicates that muting is not enabled, while false indicates muting or assigns a value to it to set whether playback is muted.

Thank you for reading this article carefully. I hope the article "sample Analysis of Video attributes and Custom players in HTML5" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.