Properties of the <video> tag
The code is as follows: src: Video properties
Poster: Video cover, no picture displayed when playing
Preload: Pre-load
AutoPlay: Auto Play
Loop: Looping Playback
Controls: Browser's own control bar
Width: Video width
Height: Video Height
HTML code
The code is as follows: <video id= "Media" src= "Http://www.jb51.net/test.mp4" Controls Width= "400px" heigt= "400px" ></video>
Both audio and video can get objects through JS, and JS gets the objects of video and audio via ID.
Get the 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. User Termination 2. Network error 3. Decoding Error 4.URL invalid
<strong>//Network Status </strong>
-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 you can play a resource in a certain format
-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 resource specified by SRC
-media.buffered; Returns the buffered area, timeranges
-Media.preload; None: No preload metadata: Preload resource information auto:</p> <p><strong>//readiness Status </strong>
-media.readystate;//1:have_nothing 2:have_metadata 3.have_current_data 4.have_future_data 5.HAVE_ENOUGH_DATA
-Media.seeking; is seeking</p> <p><strong>//playback status </strong></p> <p>media.currenttime = value; Current playback position, assignment can change position
Media.starttime; Typically 0, not 0 if it is a streaming medium or a resource that does not start at 0
Media.duration; Current resource length stream returns unlimited
media.paused; Whether to pause
Media.defaultplaybackrate = value;//The default playback speed, you can 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 area that can be seek timeranges
media.ended; Whether to end
Media.autoplay; Whether to play automatically
Media.loop; Whether to loop playback
Media.play (); Play
Media.pause (); Time out
<strong>//Video Control </strong></p> <p>media.controls;//whether there is a default control bar
Media.volume = value; Volume
media.muted = value; Mute
Timeranges (Region) object
Timeranges.length; Number of Region segments
Timeranges.start (index)//start position of the area of the index section
Timeranges.end (index)//End position of the section of the index area
<strong>//related events </strong></p> <p> var eventtester = function (e) {
Media.addeventlistener (E,function () {
Console.log (New Date ()). GetTime (), E)
},false);
}
Eventtester ("Loadstart"); The client begins to request data
Eventtester ("Progress"); Client is requesting data
Eventtester ("suspend"); Delayed download
Eventtester ("Abort"); The client actively terminates the download (not due to an error)
Eventtester ("Loadstart"); The client begins to request data
Eventtester ("Progress"); Client is requesting data
Eventtester ("suspend"); Delayed download
Eventtester ("Abort"); The client actively terminates the download (not due to an error),
Eventtester ("error"); Error encountered while requesting data
Eventtester ("stalled"); Speed stall
Eventtester ("Play"); Triggers when play () and AutoPlay start playing
Eventtester ("pause"); Pause () Trigger
Eventtester ("Loadedmetadata"); Successful acquisition of resource length
Eventtester ("Loadeddata"); //
Eventtester ("Waiting"); Wait for data, not error
Eventtester ("playing"); Start playback
Eventtester ("Canplay"); Can be played, but may be paused halfway through loading
Eventtester ("Canplaythrough"); Can play, the songs are all loaded
Eventtester ("seeking"); Find in
Eventtester ("seeked"); Search Complete
Eventtester ("Timeupdate"); Play Time change
Eventtester ("ended"); Play End
Eventtester ("Ratechange"); Playback rate Change
Eventtester ("Durationchange"); Resource length Change
Eventtester ("Volumechange"); Volume change
HTML5 description of properties, methods, and events for the video tag
