亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么使用h5新增的audio與video標簽

發布時間:2021-10-28 09:54:13 來源:億速云 閱讀:194 作者:iii 欄目:web開發

本篇內容主要講解“怎么使用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>

效果如下:

怎么使用h5新增的audio與video標簽

此外我們還可以使用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屬性表示每當音頻結束時重新開始播放。

怎么使用h5新增的audio與video標簽

audio標簽在不同瀏覽器下的效果存在差異:

怎么使用h5新增的audio與video標簽

許多時髦的網站都提供視頻,直到現在,仍然不存在一項旨在網頁上顯示視頻的標準。今天,大多數視頻是通過插件(比如 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>

怎么使用h5新增的audio與video標簽

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標簽”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

班玛县| 紫金县| 湄潭县| 柘荣县| 手机| 鄂温| 彭水| 正镶白旗| 连江县| 石狮市| 博湖县| 额敏县| 郯城县| 平谷区| 渑池县| 辽阳市| 包头市| 泗水县| 察哈| 桐城市| 德庆县| 鄂托克前旗| 苍溪县| 祁门县| 渭南市| 阿荣旗| 同德县| 依安县| 禄劝| 江孜县| 库尔勒市| 芦溪县| 潜江市| 乐安县| 都昌县| 伊川县| 霍林郭勒市| 平泉县| 从化市| 农安县| 乌鲁木齐市|