HTML5 Audio Tag Properties, methods, Event summary

Source: Internet
Author: User

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

    1. <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

    1. <video id= "Media" src= "Http://www.abc.com/test.mp4" Controls Width= "400px" height= "400px" > </video>

Get Htmlvideoelement and Htmlaudioelement objects

[HTML] view Plaincopy

    1. Audio can create objects directly from new
    2. Media = new Audio ("Http://www.abc.com/test.mp3");
    3. Both audio and video can be used to get objects from tags
    4. 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

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.