HTML5的多媒體

在html5中新增了兩個(gè)多媒體標(biāo)簽

• audio音頻標(biāo)簽
• video視頻標(biāo)簽

語(yǔ)法格式

在語(yǔ)法格式上，音頻與視頻，大致相同
（無(wú)法正常播放）

<video src=""></video><audio src=""></audio>

往src里填寫視頻/音頻路徑即可，但是這時(shí)候會(huì)顯示一個(gè)圖片，不會(huì)進(jìn)行播放，也沒(méi)辦法操控播放，這是因?yàn)槲覀冞€沒(méi)有使用任何的控制組件。

正確可使用方式：

<audio id="" src="1.mp3" controls></audio><video id="" src="./1.mp4" controls="controls" width="300px"></video>

controls屬性表示使用瀏覽器自帶控制條，通常自帶播放、暫停等按鈕。
controls的完全寫法應(yīng)該是controls="controls"，也可以簡(jiǎn)寫成 controls

谷歌瀏覽器實(shí)測(cè)：

IE瀏覽器實(shí)測(cè)：

突然覺(jué)得谷歌好圓潤(rùn)，符合我的審美，nice

多媒體的其他屬性

• autoplay（自動(dòng)播放，autoplay="autoplay"，可簡(jiǎn)寫為 autoplay ）
• perload（預(yù)加載，提高播放速度，屬性值none、metadata、auto）
• poster(video獨(dú)有，如果播放失敗時(shí)展示一幅圖片代替，屬性值即為圖片地址)
• loop（循環(huán)播放，loop="loop"，可簡(jiǎn)寫為loop）
• width、height（設(shè)置窗口的大小）
• currentsrc（只讀屬性，返回媒體的URL地址）
• played、paused、ended（已經(jīng)播放的時(shí)間段、是否暫停、是否播放完畢）
• volume、muted（音量、靜音）

在perload中，none表示不預(yù)先加載，metadata表示預(yù)先加載元數(shù)據(jù)（字節(jié)數(shù)、第一幀、時(shí)間等）

paused和ended返回的是布爾值，true表示已暫停/已結(jié)束，false表示未暫停/未結(jié)束

volume表示音量，屬性值1-0，1表示100%，0表示0%
muted表示靜音，屬性值為布爾值，true表示靜音，false表示未靜音

多媒體的方法

無(wú)論是音頻還是視頻，都存在三種方法，播放、暫停、重新載入

• 播放 play()
• 暫停 pause()
• 重新載入 load()

<video id="xsx" src="./1.mp4" controls="controls" preload="auto" muted="true" autoplay="autoplay" preload="auto" width="300px" loop="loop"></video><input type="button" value="播放" onclick=play()><input type="button" value="暫停" onclick=pause()><input type="button" value="重新加載" onclick=load()><script>var x = document.getElementById('xsx')function play(){x.play()console.log("播放")}function pause(){x.pause()console.log("暫停")}function load(){x.load()console.log("重新加載")}</script>

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的HTML+CSS+JavaScript复习笔记持更（四）——多媒体篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。