Introduction to HTML5Video tag attributes, methods, and events _ html5 tutorial tips-

This article mainly introduces the attributes, methods, and event summary of the HTML5Video tag, this article describes the attributes of tags, video objects, Media methods and attributes, network status, preparation status, playback status, and related event row content, if you need a video player, you can refer to a video player that was written based on html5 video some time ago. From the very beginning, you don't know about it, and then you can 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.

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:

// 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
// Network status
-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:

// Preparation status
-Media. readyState; // 1: HAVE_NOTHING 2: HAVE_METADATA 3. HAVE_CURRENT_DATA 4. HAVE_FUTURE_DATA 5. HAVE_ENOUGH_DATA
-Media. seeking; // specifies whether or not seeking is being performed.

// Playback status

Media. currentTime = value; // The current playback position. The value can change the position.
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
// Video control

Media. controls; // 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.
// Related events

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