Introduction to HTML5 Video tag attributes, methods, and events, html5video

Introduction to HTML5 Video tag attributes, methods, and events, html5video
This article mainly introduces the attributes, methods, and event Summary of HTML5 Video tags. The attributes of tags, the video object, the Media method and attributes, the network status, the preparation status, the playback status, and the related event content. For more information, see

Some time ago I wrote a video Player Based on html5 video. I didn't know about it at first, and I was able to write a basic custom player. In this process, we have a comprehensive understanding of the attributes, methods, and events of video tags. The following categories are listed.

<Video> tag attributes

The Code is as follows:
Src: Video attributes
Poster: Specifies the video album art. No picture is displayed during playback.
Preload: pre-load
Autoplay: automatic playback
Loop: loop playback
Controls: control bar provided by the browser
Width: Specifies the video width.
Height: Video height

Html code

The Code is as follows:
<Video id = "media" src = "http://www.bkjia.com/test.mp4" controls width = "400px" heimpaired = "400px"> </video>
// Both audio and video can get objects through JS, and JS gets video and audio objects through id

Get video object

The Code is as follows:
Media = document. getElementById ("media ");

Media methods and attributes:

Both HTMLVideoElement and HTMLAudioElement inherit from HTMLMediaElement

The Code is as follows:
Media. error; // null: normal
Media. error. code; // 1. User termination 2. network error 3. decoding error 4. Invalid URL
<Strong> // network status </strong>
-Media. currentSrc; // return the URL of the current resource.
-Media. src = value; // return or set the URL of the current resource
-Media. canPlayType (type); // whether resources in a certain format can be played
-Media. networkState; // 0. This element is not initialized. 1. The network is not used. 2. The data is being downloaded. 3. The resource is not found.
-Media. load (); // reload the resources specified by src.
-Media. buffered; // return the buffered area, TimeRanges
-Media. preload; // none: Do not preload metadata: pre-load resource information auto: </p> <strong> // preparation status </strong>
-Media. readyState; // 1: HAVE_NOTHING 2: HAVE_METADATA 3. HAVE_CURRENT_DATA 4. HAVE_FUTURE_DATA 5. HAVE_ENOUGH_DATA
-Media. seeking; // whether seeking is in progress </p> <strong> // playback status </strong> </p> <p> Media. currentTime = value; // The current playback position. The position can be changed by assigning values.
Media. startTime; // It is generally 0. If it is streaming Media or a resource not starting from 0, it is not 0.
Media. duration; // The length of the current resource. The stream returns an unlimited number.
Media. paused; // whether to pause
Media. defaultPlaybackRate = value; // default playback speed, which can be set
Media. playbackRate = value; // The current playback speed. The setting changes immediately.
Media. played; // return the played area, TimeRanges. For details about this object, see the following
Media. seekable; // returns the region TimeRanges that can be seek.
Media. ended; // whether to end
Media. autoPlay; // whether to play automatically
Media. loop; // whether to play cyclically
Media. play (); // play
Media. pause (); // pause
<Strong> // video control </strong> </p> <p> Media. controls; // check whether the default control bar exists.
Media. volume = value; // volume
Media. muted = value; // mute
TimeRanges (region) object
TimeRanges. length; // number of segments
TimeRanges. start (index) // start position of the index segment
TimeRanges. end (index) // The end position of the index segment.
<Strong> // related events </strong> </p> <p> var eventTester = function (e ){
Media. addEventListener (e, function (){
Console. log (new Date (). getTime (), e)
}, False );
}
EventTester ("loadstart"); // The client starts to request data.
EventTester ("progress"); // The client is requesting data
EventTester ("suspend"); // delay download
EventTester ("abort"); // The client proactively terminates the download (not due to an error)
EventTester ("loadstart"); // The client starts to request data.
EventTester ("progress"); // The client is requesting data
EventTester ("suspend"); // delay download
EventTester ("abort"); // The client proactively terminates the download (not due to an error ),
EventTester ("error"); // An error occurred while requesting data
EventTester ("stalled"); // network speed stall
EventTester ("play"); // triggered when play () and autoplay start play
EventTester ("pause"); // pause () triggers
EventTester ("loadedmetadata"); // The resource length is obtained successfully.
EventTester ("loadeddata ");//
EventTester ("waiting"); // wait for data, not an error
EventTester ("playing"); // start playback
EventTester ("canplay"); // It can be played, but it may be paused during loading.
EventTester ("canplaythrough"); // It can be played. All the songs have been loaded.
EventTester ("seeking"); // searching
EventTester ("seeked"); // search complete
EventTester ("timeupdate"); // Changes the playback time
EventTester ("ended"); // The End Of The playback.
EventTester ("ratechange"); // Changes the playback speed
EventTester ("durationchange"); // resource Length Change
EventTester ("volumechange"); // volume change