來源：
https://www.bilibili.com/video/BV14J4114768?p=276&spm_id_from=pageDriver
視頻<video>
當(dāng)前<video>元素支持三種視頻格式：盡量使用MP4格式
| 瀏覽器 | MP4 | WebM | Ogg |
|---|---|---|---|
| IE | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES 從Firefox21版本開始Linux系統(tǒng)從Firefox 30開始 | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES 從Opera25版本開始 | 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>標(biāo)簽播放視頻
</video>
視頻<video>——常見屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 視頻就緒自動播放（谷歌瀏覽器需添加muted來解決自動播放問題） |
| controls | controls | 向用戶顯示播放控件 |
| width | pixels（像素） | 設(shè)置播放器寬度 |
| height | pixels（像素） | 播放器高度 |
| loop | loop | 循環(huán)播放 |
| src | url | 視頻url地址 |
| poster | imageurl | 加載等待的話面圖片 |
| muted | muted | 靜音播放 |
音頻<audio>
| 瀏覽器 | MP3 | Wav | Ogg |
|---|---|---|---|
| IE 9+ | YES | NO | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | YES | YES | YES |
| Safari 5+ | YES | YES | NO |
| Opera 10+ | YES | YES | YES |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5音頻標(biāo)簽</title>
</head>
<body>
<audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">
<source src="medio/music.mp3" type="audio/mpeg">
您的瀏覽器不支持audio元素
</audio>
</body>
</html>
谷歌瀏覽器把音頻和視頻自動播放禁止了
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自動播放 |
| controls | controls | 向用戶顯示播放控件 |
| loop | loop | 循環(huán)播放 |
| src | url | 視頻url地址 |
| muted | muted | 靜音播放 |
多媒體標(biāo)簽總結(jié)
- 音頻標(biāo)簽和視頻標(biāo)簽使用方式基本一致
- 瀏覽器支持情況不同
- 谷歌瀏覽器把音頻和視頻自動播放禁止了
- 我們可以給視頻標(biāo)簽加muted屬性來靜音播放視頻懂衩，音頻不可以（可以通過JavaScript來解決）
- 視頻標(biāo)簽是重點栅干，我們經(jīng)常設(shè)置自動播放糠悯，不適用conrols控件拔稳，循環(huán)和設(shè)置大小屬性
