"Reprint" HTML5 Audio/video tags, properties, methods, Event summary

<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 code

1. <audio id= "Media" src= "http://www.abc.com/test.mp3″controls></audio>

<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

HTML code

1. <video id= "Media" src= "Http://www.abc.com/test.mp4″controls width=" 400px "heigt=" 400px "></video>

Get Htmlvideoelement and Htmlaudioelement objects

JS Code

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

Media Methods and properties:

Both Htmlvideoelement and htmlaudioelement inherit from Htmlmediaelement

JS Code

2. Error status
4. Media.error; Null: Normal
6. Media.error.code; 1. User Termination 2. Network error 3. Decoding Error 4.URL invalid
10. Network status
12. MEDIA.CURRENTSRC; Returns the URL of the current resource
14. MEDIA.SRC = value; Returns or sets the URL of the current resource
16. Media.canplaytype (type); Whether you can play a resource in a certain format
18. Media.networkstate; 0. This element is not initialized 1. Normal but not using network 2. Downloading Data 3. No Resources found
20. Media.load (); Reload the resource specified by SRC
22. media.buffered; Returns the buffered area, timeranges
24. Media.preload; None: Do not preload metadata: Preload resource information Auto:
28. Readiness Status
30. Media.readystate; 1:have_nothing 2:have_metadata 3.have_current_data 4.have_future_data 5.have_enough_data
32. media.seeking; Are you seeking
36. Playback status
38. Media.currenttime = value; Current playback position, assignment can change position
40. Media.starttime; Typically 0, not 0 if it is a streaming medium or a resource that does not start at 0
42. Media.duration; Current resource length stream returns unlimited
44. media.paused; Whether to pause
46. Media.defaultplaybackrate = value;//The default playback speed, you can set
48. Media.playbackrate = value;//Current playback speed, change immediately after setting
50. media.played; Returns the area that has been played, timeranges, for this object see below
52. media.seekable; Returns the area that can be seek timeranges
54. media.ended; Whether to end
56. Media.autoplay; Whether to play automatically
58. Media.loop; Whether to loop playback
60. Media.play (); Play
62. Media.pause (); Time out
66. Control
68. media.controls;//whether there is a default control bar
70. Media.volume = value; Volume
72. media.muted = value; Mute
76. Timeranges (Region) object
78. Timeranges.length; Number of Region segments
80. Timeranges.start (index)//start position of the area of the index section
82. Timeranges.end (index)//End position of the section of the index area

Event:

JS Code

2. Eventtester = function (e) {
4. Media.addeventlistener (E,function () {
6. Console.log (New Date ()). GetTime (), E);
8. });
10. }
14. Eventtester ("Loadstart"); The client begins to request data
16. Eventtester ("Progress"); Client is requesting data
18. Eventtester ("suspend"); Delayed download
20. Eventtester ("Abort"); The client actively terminates the download (not due to an error),
22. Eventtester ("error"); Error encountered while requesting data
24. Eventtester ("stalled"); Speed stall
26. Eventtester ("Play"); Triggers when play () and AutoPlay start playing
28. Eventtester ("pause"); Pause () Trigger
30. Eventtester ("Loadedmetadata"); Successful acquisition of resource length
32. Eventtester ("Loadeddata"); //
34. Eventtester ("Waiting"); Wait for data, not error
36. Eventtester ("playing"); Start playback
38. Eventtester ("Canplay"); Can be played, but may be paused halfway through loading
40. Eventtester ("Canplaythrough"); Can play, the songs are all loaded
42. Eventtester ("seeking"); Find in
44. Eventtester ("seeked"); Search Complete
46. Eventtester ("Timeupdate"); Play Time change
48. Eventtester ("ended"); Play End
50. Eventtester ("Ratechange"); Playback rate Change
52. Eventtester ("Durationchange"); Resource length Change
54. Eventtester ("Volumechange"); Volume change

[Transfer from: http://directguo.com/blog/index.php/2010/07/html5-audio-video-tag/]