Home >Web Front-end >HTML Tutorial >The use of audio and video tags in HTML5

The use of audio and video tags in HTML5

不言
不言Original
2018-04-27 14:09:242862browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn