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

Source: Internet
Author: User
Tags terminates

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

  document.getElementById("media"); 
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.