HTML5新增的多媒體標(biāo)簽怎么使用
這篇“HTML5新增的多媒體標(biāo)簽怎么使用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“HTML5新增的多媒體標(biāo)簽怎么使用”文章吧。
創(chuàng)新互聯(lián)公司提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)，品牌網(wǎng)站建設(shè)，1元廣告等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作，10年的網(wǎng)站開發(fā)和建站經(jīng)驗(yàn),助力企業(yè)信息化建設(shè)，成功案例突破數(shù)千家,是您實(shí)現(xiàn)網(wǎng)站建設(shè)的好選擇.
HTML5新增的多媒體標(biāo)簽
一：視頻<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 | 視頻就緒自動(dòng)播放（谷歌瀏覽器需添加muted來(lái)解決自動(dòng)播放問(wèn)題） |
| 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>
谷歌瀏覽器把音頻和視頻自動(dòng)播放禁止了
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自動(dòng)播放 |
| controls | controls | 向用戶顯示播放控件 |
| loop | loop | 循環(huán)播放 |
| src | url | 視頻url地址 |
| muted | muted | 靜音播放 |
多媒體標(biāo)簽總結(jié)
音頻標(biāo)簽和視頻標(biāo)簽使用方式基本一致
瀏覽器支持情況不同
谷歌瀏覽器把音頻和視頻自動(dòng)播放禁止了
我們可以給視頻標(biāo)簽加muted屬性來(lái)靜音播放視頻，音頻不可以（可以通過(guò)JavaScript來(lái)解決）
視頻標(biāo)簽是重點(diǎn)，我們經(jīng)常設(shè)置自動(dòng)播放，不適用conrols控件，循環(huán)和設(shè)置大小屬性
以上就是關(guān)于“HTML5新增的多媒體標(biāo)簽怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁(yè)題目：HTML5新增的多媒體標(biāo)簽怎么使用
分享路徑：http://jinyejixie.com/article30/ggippo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、外貿(mào)建站、虛擬主機(jī)、微信小程序、網(wǎng)站維護(hù)、用戶體驗(yàn)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 品牌網(wǎng)站制作的價(jià)格為什么那么高呢？ 2016-10-28
- 如何做好品牌網(wǎng)站制作 2021-11-16
- 高端品牌網(wǎng)站制作策劃方案 2021-10-09
- 品牌網(wǎng)站制作常見的布局方式！ 2022-05-11
- 品牌網(wǎng)站制作為什么只能選擇網(wǎng)站定制 2021-10-04
- 保定品牌網(wǎng)站制作：如何做好一個(gè)成功的品牌網(wǎng)站？ 2021-08-27
- 品牌網(wǎng)站制作之搜索引擎營(yíng)銷 2021-11-17
- 如何打響品牌網(wǎng)站制作的知名度 2021-12-11
- 為什么高端品牌網(wǎng)站制作公司越來(lái)越少了 2016-11-12
- 湛江品牌網(wǎng)站制作：做好品牌網(wǎng)站制作方案有哪些要點(diǎn)？ 2021-12-23
- 品牌網(wǎng)站制作怎么建設(shè)更高效 2021-08-27
- 品牌網(wǎng)站制作與普通網(wǎng)站制作的區(qū)別 2021-09-02