溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么使用h5新增的audio與video標簽”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么使用h5新增的audio與video標簽”吧!
如果要求你在網頁中加入音頻資源，你會怎么實現呢？
在h6出現以前， 我們可以借助iframe 元素插入視頻資源到我們的網頁中，代碼實現如下：
<!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標簽來引入音頻媒體資源到我們的網頁中，增加網頁的豐富度。
<audio> 標簽定義聲音，比如音樂或其他音頻流。這里包含.mp3或者.ogg格式的音頻文件, 可以在開始標簽和結束標簽之間放置文本內容，這樣老的瀏覽器就可以顯示出不支持該標簽的信息，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>h6 audio標簽的使用</title> </head> <body> <audio controls loop> <source src="bgsound.mp3" /> <source src="music.ogg" /> 您的瀏覽器版本太低 </audio> </body> </html>
效果如下（chrome瀏覽器）：給audio標簽添加controls屬性可以向用戶顯示控件，比如播放按鈕；loop屬性表示每當音頻結束時重新開始播放。
audio標簽在不同瀏覽器下的效果存在差異：
許多時髦的網站都提供視頻，直到現在，仍然不存在一項旨在網頁上顯示視頻的標準。今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規定了一種通過 video 元素來包含視頻的標準方法。并且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 屬性
你還可以設置視頻窗口大小
<video src="test.mp4" controls width="400" height="300"></video>
切換播放地址（常見于切換超清 高清 流暢，不同畫質的視頻地址不同）
<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 絕對地址，DOM 中是相對地址
// video.src = 'test-2.mp4' // 直接替換掉了原來的視頻src
setTimeout(() => {
video.src = 'test-2.mp4' // 播放到第 30s 的時候，自動切換視頻
}, 30000)
</script>切換備用地址, video標簽中可以嵌入多個source元素做播放地址的后援切換，當第一段視頻加載失敗時，會自動加載下一段視頻。
<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 載入失敗，狀態碼 404。媒體資源 http://127.0.0.1:8001/test3.mp4 載入失敗。
// HTTP 載入失敗，狀態碼 404。媒體資源 http://127.0.0.1:8001/test9.mp4 載入失敗。
</script>到此，相信大家對“怎么使用h5新增的audio與video標簽”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
