Summary introduction to the attributes, methods and events of the HTML5 Video tag_html5 tutorial skills

I wrote a video player based on html5 video some time ago. I didn’t understand it at first, and then I was able to write a basically complete custom player. In this process, I gained a comprehensive understanding of the attributes, methods, and events of the video tag. The categories are listed below.

Copy code

The code is as follows:

src: attributes of the video
poster: video cover, no picture displayed during playback
preload: preloading
autoplay: automatic playback
loop: loop playback
controls: the control bar that comes with the browser
width: video width
height: video height

html code

Copy code

The code is as follows:

// Both audio and video can obtain objects through JS, and JS obtains video and audio objects through id

Get the video object

Copy the code

The code is as follows:

Media = document.getElementById("media");

Media methods and properties:

HTMLVideoElement and HTMLAudioElement both inherit from HTMLMediaElement

Copy code

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. Normal but not using the network 2. Data is being downloaded 3. No resource found
- Media.load(); //Reload the resources specified by src
- Media.buffered; //Return to the buffered area, TimeRanges
- Media.preload; //none: do not preload metadata: preload resources Information auto:

//Ready State
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; //Whether seeking

//Playback status

Media.currentTime = value; //The current playing position, assigning a value can change the position
Media.startTime; //Generally 0, if it is streaming media or a resource that does not start from 0, it will not be 0
Media.duration; //The current resource length stream returns infinite
Media.paused; //Whether to pause
Media.defaultPlaybackRate = value; //The default playback speed can be set
Media.playbackRate = value; //Current playback speed, change immediately after setting
Media.played; //Return the area that has been played, TimeRanges, see below for this object
Media.seekable; //Return the area that can be seeked TimeRanges
Media.ended; // Whether to end
Media.autoPlay; // Whether to automatically play
Media.loop; // Whether to loop playback
Media.play(); // Play
Media.pause(); //Pause
//Video control

Media.controls;//Whether there is a default control bar
Media.volume = value; //Volume
Media.muted = value; //Mute
TimeRanges (area) object
TimeRanges.length; //Number of area segments
TimeRanges.start(index) //Start position of the index segment area
TimeRanges.end(index) //End position of the index segment area

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") ; //Delayed download
eventTester("abort"); //The client actively terminates the download (not due to an error)
eventTester("loadstart"); //The client starts requesting data
eventTester( "progress"); //The client is requesting data
eventTester("suspend"); //Delayed download
eventTester("abort"); //The client actively terminates the download (not due to an error),
eventTester("error"); //An error was encountered when requesting data
eventTester("stalled"); //Network speed stalled
eventTester("play"); //play() and autoplay Triggered when starting playback
eventTester("pause"); //pause() triggered
eventTester("loadedmetadata"); //Successfully obtained resource length
eventTester("loadeddata"); //
eventTester("waiting"); //Waiting for data, not an error
eventTester("playing"); //Start playback
eventTester("canplay"); //Can play, but may be interrupted due to loading Pause
eventTester("canplaythrough"); //Can be played, all songs have been loaded
eventTester("seeking"); //Searching
eventTester("seeked"); //Searching completed
eventTester("timeupdate"); //Playing time changes
eventTester("ended"); //Playing ends
eventTester("ratechange"); //Playing rate changes
eventTester("durationchange" ); //Resource length changes
eventTester("volumechange"); //Volume changes