HTML5 properties, methods, and events summary for the video tag

HTML5 properties, methods, and events summary for the video tag

Some time ago wrote a video player based on HTML5, from the beginning of not understanding it, and then to be able to write a basic perfect custom player. In this process, we have a comprehensive understanding of the properties, methods, and events of the video tag. The following categories are listed here.

Properties of the <video> tag

• SRC: Properties of the video
• 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

  <video id="media" src="http://www.sundxs.com/test.mp4" controls width="400px" heigt="400px"></video>    //audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象

Get the Video object

Media Methods and properties:

Both Htmlvideoelement and htmlaudioelement inherit from Htmlmediaelement

• Media.error; Null: Normal
• Media.error.code; 1. User Termination 2. Network error 3. Decoding Error 4.URL 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 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: Do not preload metadata: Preload resource information Auto:

Readiness Status
-media.readystate;//1:have_nothing 2:have_metadata 3.have_current_data 4.have_future_data 5.HAVE_ENOUGH_DATA
-Media.seeking; Are you seeking

Playback status

• 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

Video control

• 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

Related events

  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 properties, methods, and events summary for the video tag