溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“HTML5新增的多媒體標簽怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“HTML5新增的多媒體標簽怎么使用”文章吧。
HTML5新增的多媒體標簽
一：視頻<video>
當前<video>元素支持三種視頻格式：盡量使用MP4格式
| 瀏覽器 | MP4 | WebM | Ogg |
|---|---|---|---|
| IE | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES 從Firefox21版本開始Linux系統從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 | 循環播放 |
| 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 | 循環播放 |
| src | url | 視頻url地址 |
| muted | muted | 靜音播放 |
多媒體標簽總結
音頻標簽和視頻標簽使用方式基本一致
瀏覽器支持情況不同
谷歌瀏覽器把音頻和視頻自動播放禁止了
我們可以給視頻標簽加muted屬性來靜音播放視頻，音頻不可以（可以通過JavaScript來解決）
視頻標簽是重點，我們經常設置自動播放，不適用conrols控件，循環和設置大小屬性
以上就是關于“HTML5新增的多媒體標簽怎么使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
