The newly added multimedia tags mainly include two :
> Audio: <audio>
> Video: <video>
1. Video <video>
The current <video> element supports three video formats: mp4, WebM, Ogg, try to use the mp4 format (because almost all browsers are compatible).
1.1 The syntax format of the video:
<video src="File address" controls="controls"></video>
1.2 Video <video>-Common attributes
| Attributes |
value |
description |
| autoplay |
autoplay |
Video ready to play automatically (Google browser needs to add muted to solve the autoplay problem) |
| contrcols |
contrcols |
Show the user the playback controls |
| width |
pixels |
Set the width of the player |
| height |
pixels |
Set the height of the player |
| loop |
loop |
Whether to continue playing the video after playing, looping |
| preload |
auto (preload video) none (video should not be loaded) |
Specifies whether to preload the video (if there is autoplay, ignore this attribute) |
| src |
url |
Video url address |
| poster |
Imgurl |
Load the waiting page image |
| muted |
muted |
Mute play |
2. Audio <audio>
The current <audio> element supports three audio formats: MP3, Wav, Ogg
2.1 Audio syntax format
<audio src="File address" controls="controls"></audio>
2.2 Common properties of audio
| Attributes |
value |
description |
| autoplay |
autoplay |
If this attribute appears, the audio will play as soon as it is ready |
| controls |
controls |
If this property appears, display controls to the user, such as a play button |
| loop |
loop |
If this attribute appears, restart playback whenever the audio ends |
| src |
url |
The url address of the audio to be played |
Note: Google Chrome disables the automatic playback of audio and video
3. Summary of Multimedia Tags
>The use of audio tags and video tags is basically the same
>Browser support is different
>Google Chrome disables the automatic playback of audio and video
> You can add a muted attribute to the video tag to mute the video, but not the audio (if you want to automatically play, you can use JavaScript to solve it)
Recommended
Recommended study this week: javaweb
Recommended learning video link: https://www.bilibili.com/video/BV11741127ic?p=93