1. <audio> Tag Properties
src: The URL of the music
Preload: Pre-load
AutoPlay: Auto Play
Loop: Looping Playback
Controls: Browser's own control bar
[HTML] view Plaincopy
- <audio id= "Media" src= "Http://www.abc.com/test.mp3" controls></audio>
2. <video> Tag Properties
src: URL 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
Muted: Whether to output video sound
[HTML] view Plaincopy
- <video id= "Media" src= "Http://www.abc.com/test.mp4" Controls Width= "400px" height= "400px" > </video>
Get Htmlvideoelement and Htmlaudioelement objects
[HTML] view Plaincopy
- Audio can create objects directly from new
- Media = new Audio ("Http://www.abc.com/test.mp3");
- Both audio and video can be used to get objects from tags
- Media = document.getElementById ("media");
Media methods and properties--htmlvideoelement and htmlaudioelement inherit from Htmlmediaelement
Error status
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 (); Pause//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
Event
Eventtester = function (e) {
Media.addeventlistener (E,function () {
Console.log ((Newdate ()). GetTime (), E);
});
}
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 Audio Tag Properties, methods, Event summary