站長(zhǎng)資訊網(wǎng)如果要求你在網(wǎng)頁(yè)中加入音頻資源，你會(huì)怎么實(shí)現(xiàn)呢？
在h5出現(xiàn)以前， 我們可以借助iframe 元素插入視頻資源到我們的網(wǎng)頁(yè)中，代碼實(shí)現(xiàn)如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <iframe height=498 width=510 src='http://player.youku.com/embed/XMzIzNTc0MTAwMA==' frameborder=0 ' allowfullscreen'></iframe> </body> </html>
效果如下：
此外我們還可以使用Html5 audio與video標(biāo)簽來引入音頻媒體資源到我們的網(wǎng)頁(yè)中，增加網(wǎng)頁(yè)的豐富度。
<audio> 標(biāo)簽定義聲音，比如音樂或其他音頻流。這里包含.mp3或者.ogg格式的音頻文件, 可以在開始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣老的瀏覽器就可以顯示出不支持該標(biāo)簽的信息，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>h5 audio標(biāo)簽的使用</title> </head> <body> <audio controls loop> <source src="bgsound.mp3" /> <source src="music.ogg" /> 您的瀏覽器版本太低 </audio> </body> </html>
效果如下（chrome瀏覽器）：給audio標(biāo)簽添加controls屬性可以向用戶顯示控件，比如播放按鈕；loop屬性表示每當(dāng)音頻結(jié)束時(shí)重新開始播放。
audio標(biāo)簽在不同瀏覽器下的效果存在差異：
許多時(shí)髦的網(wǎng)站都提供視頻，直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁(yè)上顯示視頻的標(biāo)準(zhǔn)。今天，大多數(shù)視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規(guī)定了一種通過 video 元素來包含視頻的標(biāo)準(zhǔn)方法。并且video元素支持HTML 中的全局屬性（如class，id，title , style等）與事件屬性（如onresize，onredo等）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <video autoplay controls> <source src="movie04.ogg" /> <source src="mp4.mp4" /> Opps,您的瀏覽器版本太低,暫不支持該視頻的播放~ </video> </body> </html>
video 屬性
你還可以設(shè)置視頻窗口大小
<video src="test.mp4" controls width="400" height="300"></video>
切換播放地址（常見于切換超清 高清 流暢，不同畫質(zhì)的視頻地址不同）
<video src="test.mp4" controls autoplay width="400" height="300" id="test1"></video> <script> var video = document.getElementById('test1') console.log(video.src) // http://127.0.0.1:8001/test.mp4 絕對(duì)地址，DOM 中是相對(duì)地址 // video.src = 'test-2.mp4' // 直接替換掉了原來的視頻src setTimeout(() => { video.src = 'test-2.mp4' // 播放到第 30s 的時(shí)候，自動(dòng)切換視頻 }, 30000) </script>
切換備用地址, video標(biāo)簽中可以嵌入多個(gè)source元素做播放地址的后援切換，當(dāng)?shù)谝欢我曨l加載失敗時(shí)，會(huì)自動(dòng)加載下一段視頻。
<video controls autoplay width="400" height="300" id="test2"> <source src="test3.mp4" type="video/mp4" /> <source src="test9.mp4" type="video/mp4" /> <source src="test-2.mp4" type="video/mp4" /> </video> <script> var video = document.getElementById('test2') setTimeout(() => { console.log(video.currentSrc) // http://127.0.0.1:8001/test-2.mp4 }, 1000) // HTTP 載入失敗，狀態(tài)碼 404。媒體資源 http://127.0.0.1:8001/test3.mp4 載入失敗。 // HTTP 載入失敗，狀態(tài)碼 404。媒體資源 http://127.0.0.1:8001/test9.mp4 載入失敗。 </script>
