Detailed explanation of the attributes and methods of the video tag in Html5

Recently, I am writing a custom player. Before writing, we must go through all the properties and methods of the player. Only by knowing our enemies and ourselves can we be able to fight through a hundred battles... Later, we will discuss the player we wrote and some pitfalls we have encountered. Also uploaded

• src: URL of the video
• poster: video cover, no picture displayed during playback
• preload: preload
• autoplay: automatic play
• loop: loop playback
• controls: The control bar that comes with the browser
• width: video width
• height: video height
• webkit-playsinline=true prevents full-screen playback under IOS
• playsinline=true Same as above
• x-webkit-airplay=true supports the AirPlay function of ios
• x5-video-player-type=h5 Enable H5 player on the same layer
• x5-video-player-fullscreen=true full screen setting
• x5-video-orientation=portraint vertical screen
• style=object-fit:fill cover is full
• muted=true muted playback

There should be some more...but I haven't used them yet. You can check the MDN documentation.

1. Error status

 $video.error; //null: normal $video.error.code; //1. User termination 2. Network error 3. Decoding error 4. Invalid URL

2. Network status attributes (some are more commonly used)

 $video.currentSrc; //Return the URL of the current resource $video.src = value; //Return or set the URL of the current resource $video.canPlayType(type); //Whether resources in a certain format can be played $video.networkState ; //0. This element is not initialized 1. Normal but not using the network 2. Downloading data 3. No resource found $video.load(); //Reload the resource specified by src $video.buffered; //Return to the buffered area, $video.buffered.end(0) gets the last moment of data $video.preload; //none: do not preload metadata: preload resource information auto:

3.Ready state

 $video.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA $video.seeking; //Whether it is seeking

4.Playing status (commonly used)

 $video.currentTime = value; //The current playing position, assignment can change the position $video.duration; //The current resource length stream returns infinite $video.paused; //Whether to pause $video.defaultPlaybackRate = value;//Default The playback speed can be set $video.playbackRate = value; //The current playback speed will be changed immediately after setting $video.seekable; //Return to the seekable area $video.ended; //Whether to end $video.autoPlay; //Whether to automatically play $video.loop; //Whether to loop $video.play(); //Play $video.pause(); //Pause

5.Control

 $video.controls;//Whether there is a default control bar $video.volume = value; //Volume $video.muted = value; //Mute video event method (commonly added *) loadstart //The client starts to request data *progress //The client is requesting data suspend //Delayed download abort //The client actively terminates the download (not caused by an error), *error //An error was encountered when requesting data stalled //Network speed stalled *play //play () and autoplay trigger *pause when starting playback //pause() triggers loadedmetadata //Successfully obtains resource length *waiting //Waiting for data, not an error *playing //Start playback canplay //Can play, but may be paused due to loading in the middle *canplaythrough //Can play seeking // Seeked during resource search // Resource search completed *timeupdate // Playback time changed *ended // Playback ended ratechange // Playback rate changed durationchange // Resource length changed *volumechange // Volume changed

Basically, the custom player code is written based on this API and attributes, which is convenient for you to check later....

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.