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

This article introduces the knowledge of "how to understand the attributes, methods and events of HTML5 Video tags". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Some time ago, I wrote a video player based on html5 video, from not knowing it at first, and then to being able to write a custom player that is basically perfect. In this process, we have a comprehensive understanding of the attributes, methods, and events of the video tag. The following categories are listed.

Attributes of the tag

The code is as follows:

Src: attributes of video

Poster: video cover with no pictures displayed during playback

Preload: preloading

Autoplay: auto playback

Loop: loop playback

Controls: the control bar included in the browser

Width: video width

Height: video height

Html code

The code is as follows:

/ / both audio and video can obtain objects through JS, and JS can obtain objects of video and audio through id.

Get video object

The code is as follows:

Media = document.getElementById ("media")

Media methods and properties:

Both HTMLVideoElement and HTMLAudioElement inherit from HTMLMediaElement

The code is as follows:

Media.error; / / null: normal

Media.error.code; / / 1. The user terminates 2. Network error 3. Decoding error 4.URL is invalid

/ / Network status

-Media.currentSrc; / / returns the URL of the current resource

-Media.src = value; / / returns or sets the URL of the current resource

-Media.canPlayType (type); / / whether resources in a certain format can be played

-Media.networkState; / / 0. This element is not initialized 1. Normal but not using network 2. Downloading data 3. No resources found

-Media.load (); / / reload the resources specified by src

-Media.buffered; / / returns buffered region, TimeRanges

-Media.preload; / / none: do not preload metadata: preload resource information auto:

/ / status of preparation

-Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA

-Media.seeking; / / whether it is seeking or not

/ / playback status

Media.currentTime = value; / / the current playback position, which can be changed by assignment

Media.startTime; / / is generally 0, but not 0 if it is a streaming media or a resource that does not start from 0

Media.duration; / / the current resource length stream returns infinite

Media.paused; / / whether to pause

Media.defaultPlaybackRate = default playback speed of value;//, which can be set

Media.playbackRate = value;// current playback speed, change immediately after setting

Media.played; / / returns the area that has been played, TimeRanges. For this object, see below

Media.seekable; / / returns the region TimeRanges that can be seek

Media.ended; / / whether to end or not

Media.autoPlay; / / whether to play automatically

Media.loop; / / whether to play in a loop or not

Media.play (); / / playback

Media.pause (); / / pause

/ / Video control

Does Media.controls;// have a default control bar?

Media.volume = value; / / Volume

Media.muted = value; / / mute

TimeRanges (area) object

Number of TimeRanges.length; / / region segments

Start position of TimeRanges.start (index) / / paragraph index area

TimeRanges.end (index) / / the end of the index area

/ / related events

Var eventTester = function (e) {

Media.addEventListener (eQuery function () {

Console.log ((new Date ()). GetTime (), e)

}, false)

}

EventTester ("loadstart"); / / the client starts to request data

EventTester ("progress"); / / the client is requesting data

EventTester ("suspend"); / / delayed download

EventTester ("abort"); / / the client initiatively terminates the download (not caused by an error)

EventTester ("loadstart"); / / the client starts to request data

EventTester ("progress"); / / the client is requesting data

EventTester ("suspend"); / / delayed download

EventTester ("abort"); / / the client initiatively terminates the download (not caused by an error)

EventTester ("error"); / / encountered an error while requesting data

EventTester ("stalled"); / / Network speed stall

Triggered when eventTester ("play"); / / play () and autoplay start playing

EventTester ("pause"); / / pause () triggers

EventTester ("loadedmetadata"); / / obtain the resource length successfully

EventTester ("loadeddata"); / /

EventTester ("waiting"); / / waiting for data is not an error

EventTester ("playing"); / / start playback

EventTester ("canplay"); / / can be played, but may be paused due to loading

EventTester ("canplaythrough"); / / can be played, and all the songs have been loaded

EventTester ("seeking"); / / searching

EventTester ("seeked"); / / search completed

EventTester ("timeupdate"); / / playback time change

EventTester ("ended"); / / end of playback

EventTester ("ratechange"); / / playback rate change

EventTester ("durationchange"); / / Resource length change

EventTester ("volumechange"); / / Volume change

That's all for "how to understand the properties, methods, and events of HTML5 Video tags". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.