★文章內容學習來源：拉勾教育大前端就業集訓營
多媒體標簽
- 多媒體標簽包含兩個，具體如下：
- 音頻：
<audio> - 視頻：
<video> - 使用它們可以很方便的在頁面中嵌入音頻和視頻，而不再去使用落后的 flash 和其他瀏覽
器插件， - 本篇文章目錄：
一、<audio> 音頻標簽
- HTML5 在不使用插件的情況下也可以原生的支持音頻格式檔案的播放，當然支持格式是有限的，
| 格式 | MIME-type | IE9 | Firefox3.5 | Opera10.5 | Chrome3.0 | Safari3.0 |
|---|---|---|---|---|---|---|
| Ogg | audio/ogg | √ | √ | √ | ||
| MP3 | audio/mpeg | √ | √ | √ | ||
| Wav | audio/wav | √ | √ | √ |
<audio>音頻標簽常見屬性
| 屬性 | 值 | 描述 |
|---|---|---|
autoplay | autoplay | 如果出現該屬性，則音頻在就緒后馬上播放， |
controls | controls | 如果出現該屬性，則向用戶顯示控制元件，比如播放按鈕，（在HTML5中如果標簽的屬性名與屬性值相等，則可以省略屬性值不寫，但是為了頁面錯誤較少，還是寫出來） |
loop | loop | 如果出現該屬性，則每當音頻結束時重新開始播放， |
preload | preload | 如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放，如果使用 “autoplay”，則忽略該屬性， |
src | url | （必須有）要播放的音頻的 URL， |
<audio>音頻標簽語法格式
<audio src="檔案地址" controls="controls"></audio>
- 兼容寫法
<audio controls="controls" ><!--把src屬性去掉，在下面單獨加兩個source標簽-->
<source src="happy.mp3" type="audio/mpeg"> <!--這兩個格式都設定，常見所有瀏覽器都可以支持-->
<source src="happy.ogg" type="audio/ogg">
您的瀏覽器不支持audio標簽播放音頻標簽 <!--萬一的用戶的瀏覽器就是不支持，添加一句-->
</audio>
- 舉例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
</head>
<body>
<!-- 音頻的標簽和屬性 -->
<!-- <audio src="media/snow.mp3" controls="controls" preload="preload" loop></audio> -->
<!-- 多種音頻格式的兼容寫法 -->
<audio controls>
<source src="media/snow.mp3" type="audio/mpeg">
<source src="media/snow.pgg" type="audio/ogg">
您的瀏覽器版本過低，不支持音頻播放
</audio>
</body>
</html>
二、<video> 視頻標簽
- HTML5 在不使用插件的情況下也可以原生的支持視頻格式檔案的播放，當然支持格式是有
限的， - 視頻格式
| 格式 | MIME-type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|---|
| Ogg | video/ogg | × | 3.5+ | 10.5+ | 5.0+ | × |
| MP4 | video/mp4 | 9.0+ | × | × | 5.0+ | 3.0+ |
| WebM | video/webm | × | 4.0+ | 10.6+ | 6.0+ | × |
<video>視頻標簽常見屬性
| 屬性 | 值 | 描述 |
|---|---|---|
autoplay | autoplay | 視頻就緒自動播放（谷歌瀏覽器需要添加muted來解決自動播放問題） |
controls | controls | 向用戶顯示播放控制元件 |
loop | loop | 放完是否繼續播放該視頻，回圈播放 |
preload | auto（預先加載視頻） | 提前預加載，規定是否預加載視頻(如果有了autoplay 就忽略該屬性） |
none（不應加載視頻） | 規定是否預加載視頻(如果有了autoplay 就忽略該屬性） | |
src | url | 視頻url地址 |
width | pixels(像素) | 設定播放器寬度 |
height | pixels(像素) | 設定播放器高度 |
poster | Imgurl | 加載等待的畫面圖片 |
muted | muted | 靜音播放 |
<video>視頻標簽語法格式
<video src="檔案地址" controls="controls"></video>
- 兼容寫法
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
您的瀏覽器不支持video播放視頻標簽
</video>
- 舉例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<!-- 視頻檔案的標簽和屬性 -->
<!-- <video src="media/video.mp4" controls muted="muted" width="200px" height="300px" poster="images/pig.jpg"></video> -->
<!-- 不同的瀏覽器兼容寫法，需要添加多個視瞥澩檔案 -->
<video controls width="200px">
<source src="media/video.mp4" type="video/mp4">
<source src="media/video.ogg" type="video/ogg">
您的瀏覽器版本過低，不支持 video 視頻標簽
</video>
</body>
</html>
三、總結
- 音頻標簽和視頻標簽使用基本一致；
- 瀏覽器支持情況不同；
- 我們可以給視頻標簽添加
muted屬性進行自動靜音播放視頻，音頻不可以； - 視頻標簽是重點，我們經常設定自動播放，回圈和設定大小屬性，不使用
controls控制元件，
下篇繼續：
【50】HTML5 （4）——HTML5 新增表單標簽
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275016.html
標籤：其他
上一篇：幾種不常用Web API（振動、重力感應、聯網狀態）
下一篇：java可變引數（不定向引數）