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:

Two tags Basic method:

Events in two tags:

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!