Home > Article > Web Front-end > 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:
| Method | Description |
|---|---|
| to audio /Video Add a new text track | |
| Detect whether the browser can play the specified audio/video type | |
| Reload audio/video elements | |
| Start playing audio/video | |
| Pause the currently playing audio/video |
| 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:
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!