H5 video label details, h5video label details

H5 video label details, h5video label details

I used the H5 video tag yesterday to write video Playback. I was going to refer to iQiYi's code to modify it. I found it was a static page of dynamic data and needed to disassemble the code.

I am in a hurry to use video to sort out the notes. It's easy for someone to use it later.

Video compatibility

Format	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5 +	10.5 +	5.0 +	No
MPEG 4 (MP4 video format)	9.0 +	No	No	5.0 +	3.0 +
WebM	No	4.0 +	10.6 +	6.0 +	No

 

Video tag attributes

Src = "file path address" width = "width" height = "height" controls = "control bar" autoplay = "auto play" loop = "loop" preload = "pre-load"

<Video width = "320" height = "240" controls = "controls"> <! -- Compatibility of the same video -->
<Source src = "movie.ogg" type = "video/ogg"> <source src = "movie.mp4" type = "video/mp4">
<! -- Compatibility of the same video -->
Your browser does not support the video tag.
</Video>

Video js API

Method	Attribute	Event
Play () // play	CurrentSrc	Play
Pause () // pause	CurrentTime // current time	Pause
Load () // load	VideoWidth	SS // progress
CanPlayType	VideoHeight	Error
	Duration // video Length	Timeupdate
	Ended	Ended
	Error	Abort
	Paused	Empty
	Muted	Emptied
	Seeking	Waiting
	Volume // voice	Loadedmetadata
	Height
	Width

Note: Only the videoWidth and videoHeight attributes are available immediately. Other attributes are available only after the video metadata has been loaded.

Video stretch Effect

Set the video css style to object-fit: 'fill ';

 

Simply sort it out and have the opportunity to come back and improve it.