Home > Article > Web Front-end > Detailed explanation of new multimedia tags in HTML5
Detailed explanation of new multimedia tags in HTML5
- 藏色散人forward
- 2022-08-05 16:10:503266browse
This article will introduce to you the commonly used multimedia tags in HTML and the new multimedia tags in HTML5. I hope it will be helpful to friends in need!
New multimedia tags in HTML5
1: Video39000f942b2545a5315c57fa3276f220
Currently the 39000f942b2545a5315c57fa3276f220 element supports three video formats: try to use MP4 format
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| IE | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES Starting from Firefox21 version Linux system starting from Firefox 30 | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES Starting from Opera25 version | YES | YES |
<video controls="controls" autoplay="autoplay" muted="muted" width="500px" height="400px" loop="loop" poster="images/tudou.jpg" preload="none">
<source src="medio/mov_bbb.mp4">
<source src="medio/mov_bbb.ogg">
您的浏览器暂不支持<video>标签播放视频</video>Video39000f942b2545a5315c57fa3276f220——Common attributes
| Attribute | value | Description |
|---|---|---|
| autoplay | The video is ready to play automatically (Google browser needs to add muted to solve the autoplay problem) | |
| controls | Show playback controls to the user | |
| pixels(pixels) | Set player width | |
| pixels(pixels) | Play Device height | |
| loop | loop | |
| url | Video url address | |
| imageurl | Load the waiting picture | |
| muted | Mute playback |
| Wav | Ogg | ||
|---|---|---|---|
| NO | NO | Chrome 6 | |
| YES | YES | Firefox 3.6 | |
| YES | YES | Safari 5 | |
| YES | NO | ##Opera 10 | |
| YES | YES | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5音频标签</title></head><body> <audio controls="controls" autoplay="autoplay" muted="muted" loop="loop"> <source src="medio/music.mp3" type="audio/mpeg"> 您的浏览器不支持audio元素</audio> </body> </html> | Google Chrome disables automatic playback of audio and video
| Description | ##autoplay | |
|---|---|---|
| controls | controls | |
| loop | loop | |
| src | url | |
| muted | muted | |
| Multimedia tag summary |
The audio tag and video tag are basically used in the same wayBrowser support is different
- Google Chrome disables the automatic playback of audio and video
- We can add the muted attribute to the video tag to mute the video, but the audio cannot (can be solved through JavaScript)
- The video tag is the key point. We often set up automatic playback, and control control and looping are not applicable. And set the size attribute
- [Related recommendations: css video tutorial
- ]
The above is the detailed content of Detailed explanation of new multimedia tags in HTML5. For more information, please follow other related articles on the PHP Chinese website!