The use of audio and video tags in HTML5

This article mainly introduces the use of audio and video tags in HTML5. It has certain reference value. Now I share it with everyone. Friends in need can refer to the WeChat sharing page made recently by

There are a lot of voice playback and video displays, and many related method attributes have not been touched before, so record them now!

1. First, understand the basic information about the two tags:

The basic attributes of the two tags:

Properties	Description
audioTracks	Returns an AudioTrackList object representing the available audio tracks
autoplay	Set or return whether to play audio/video immediately after loading is completed
buffered	Return means The TimeRanges object of the buffered part of the audio/video
controller	Returns the MediaController object representing the current media controller of the audio/video
controls	Set or return whether audio/video displays controls (such as play/pause, etc.)
crossOrigin	Set or return audio/video CORS Settings
currentSrc	Returns the current audio/video URL
currentTime	Settings or Returns the current playback position in the audio/video (in seconds)
defaultMuted	Sets or returns whether the audio/video is muted by default
defaultPlaybackRate	Sets or returns the default playback speed of audio/video
duration	Returns the length of the current audio/video (in seconds count)
ended	Returns whether the audio/video playback has ended
error	Returns a MediaError indicating the audio/video error status Object
loop	Sets or returns whether the audio/video should replay at the end
mediaGroup	Set or return the combination to which the audio/video belongs (used to connect multiple audio/video elements)
muted	Set or return whether the audio/video is muted
networkState	Return the current network status of audio/video
paused	Set or return audio/ Whether the video is paused
playbackRate	Set or return the speed of audio/video playback
played	Returns a TimeRanges object representing the played portion of the audio/video
preload	Sets or returns whether the audio/video should be loaded after the page loads
readyState	Returns the current readiness state of the audio/video
seekable	Returns the addressable part of the audio/video TimeRanges object
seeking	Returns whether the user is searching in audio/video
src	Sets or returns the current source of audio/video elements
startDate	Returns a Date representing the current time offset Object
textTracks	Returns a TextTrackList representing available text tracks Object
videoTracks	Returns indicates available The VideoTrackList object of the video track
volume	Set or return the audio/video volume

Two tags Basic method:

##addTextTrack() to audio /Video Add a new text trackcanPlayType()Detect whether the browser can play the specified audio/video typeload()Reload audio/video elementsplay()Start playing audio/videopause()Pause the currently playing audio/video

Events in two tags:

Method	Description

Event	Description
abort	When the loading of audio/video has been aborted
canplay	When the browser can play audio/video
canplaythrough	When the browser can play the audio/video When playing without pausing due to buffering
durationchange	When the duration of the audio/video has changed
emptied	When the current playlist is empty
ended	When the current playlist has ended
error	When an error occurs during audio/video loading
loadeddata	When the browser has loaded the audio/video When the current frame is
loadedmetadata	When the browser has loaded the metadata of the audio/video
loadstart	When the browser starts looking for the audio/video
pause	When the audio/video has been paused
play	When the audio/video has started or is no longer paused
playing	When the audio/video has started due to Buffering while ready after pause or stop
progress	When browser is downloading audio/video
ratechange	When the playback speed of the audio/video has changed
seeked	When the user has moved/jumped to a new position in the audio/video
seeking	When the user starts moving/jumping to a new position in the audio/video
stalled	When the browser attempts to obtain media data, but the data is not available
suspend	When the browser deliberately does not obtain media data
timeupdate	When the current playback position has changed
volumechange	When the volume has changed
waiting	When the video stops due to the need to buffer the next frame

2. Use in the project: When the video is not loaded, the first frame of the video needs to be displayed. The first frame of the picture here is passed from the background. I checked the relevant information and found the original video tag. There is an attribute poster specifically used to display the first frame of the video, which is equivalent to the video cover image. The poster attribute is used to set or return the poster attribute value of the video. This attribute describes the image that is displayed when the video loads or before the user clicks the play button. If this attribute is not included, the first frame of the video will be used instead.

<p class="newsInfo" v-for=" item in newsFragment">
<p class="text">{{item.fragment_text_describe}}</p>
<p v-if="item.fragmentFile" v-for="items in item.fragmentFile">
<img v-if="items.fragment_type==1" :src="items.fragment_url" alt="">
<video v-else :poster="items.fileCover" controls :src="items.fragment_url"></video>
</p>
</p>

When playing audio, the browser may not support this type of audio, so you have to make a judgment: use the canPlayType() method to check whether the browser can play the specified audio/video type. The canPlayType() method can return one of the following values:
"probably" - the browser is most likely to support this audio/video type
"maybe" - the browser may support this audio/video type

"" - (empty string) The browser does not support this audio/video type

Usage syntax:

audio.canPlayType("mp3"))

Related recommendations:

Learn more HTML5 sessionStorage object

HTML5 video tag operation video detailed explanation

The above is the detailed content of The use of audio and video tags in HTML5. For more information, please follow other related articles on the PHP Chinese website!