站長資訊網(wǎng)
本篇文章給大家介紹HTML常用的多媒體標簽及HTML5新增的多媒體標簽，希望對需要的朋友有幫助！
HTML5新增的多媒體標簽
一：視頻<video>
當前<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>標簽播放視頻</video>
視頻<video>——常見屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 視頻就緒自動播放（谷歌瀏覽器需添加muted來解決自動播放問題） |
| controls | controls | 向用戶顯示播放控件 |
| width | pixels（像素） | 設置播放器寬度 |
| 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音頻標簽</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 | 靜音播放 |
多媒體標簽總結
- 音頻標簽和視頻標簽使用方式基本一致
- 瀏覽器支持情況不同
- 谷歌瀏覽器把音頻和視頻自動播放禁止了
- 我們可以給視頻標簽加muted屬性來靜音播放視頻，音頻不可以（可以通過JavaScript來解決）
- 視頻標簽是重點，我們經(jīng)常設置自動播放，不適用conrols控件，循環(huán)和設置大小屬性
【
