溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么使用h5新增的audio與video標(biāo)簽

發(fā)布時(shí)間：2021-10-28 09:54:13 來源：億速云 閱讀：194 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“怎么使用h5新增的audio與video標(biāo)簽”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么使用h5新增的audio與video標(biāo)簽”吧!

如果要求你在網(wǎng)頁中加入音頻資源，你會(huì)怎么實(shí)現(xiàn)呢？

       在h6出現(xiàn)以前， 我們可以借助iframe 元素插入視頻資源到我們的網(wǎng)頁中，代碼實(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>

效果如下：

怎么使用h5新增的audio與video標(biāo)簽

此外我們還可以使用Html5 audio與video標(biāo)簽來引入音頻媒體資源到我們的網(wǎng)頁中，增加網(wǎng)頁的豐富度。

       <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>h6 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í)重新開始播放。

怎么使用h5新增的audio與video標(biāo)簽

audio標(biāo)簽在不同瀏覽器下的效果存在差異：

怎么使用h5新增的audio與video標(biāo)簽

許多時(shí)髦的網(wǎng)站都提供視頻，直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁上顯示視頻的標(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>

怎么使用h5新增的audio與video標(biāo)簽

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>

到此，相信大家對(duì)“怎么使用h5新增的audio與video標(biāo)簽”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手