HTML5的多媒體

在html5中新增了兩個多媒體標簽

• audio音頻標簽
• video視頻標簽

語法格式

在語法格式上，音頻與視頻，大致相同
（無法正常播放）

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

往src里填寫視頻/音頻路徑即可，但是這時候會顯示一個圖片，不會進行播放，也沒辦法操控播放，這是因為我們還沒有使用任何的控制組件。

正確可使用方式：

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

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

谷歌瀏覽器實測：

IE瀏覽器實測：

突然覺得谷歌好圓潤，符合我的審美，nice

多媒體的其他屬性

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

在perload中，none表示不預先加載，metadata表示預先加載元數據（字節數、第一幀、時間等）

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

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

多媒體的方法

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

• 播放 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位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。