溫馨提示×

溫馨提示×

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

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

HTML5之Video標(biāo)簽的用法

發(fā)布時間：2021-02-05 10:36:17 來源：億速云 閱讀：217 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)HTML5之Video標(biāo)簽的用法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一、使用技巧

在HTML5中可以使用<audio>或者<video>標(biāo)簽播放Html5媒體，使用方式如下：

<video src="move.mp4"></video>

video標(biāo)簽中有很多屬性，例如controls屬性可以控制是否有控制臺。

<video src="move.mp4" controls="controls">  
    瀏覽器不支持HTML5的視頻播放功能  
</video>

從上面的視頻格式中我們可以看到不同的瀏覽器支持不同的視頻格式，這樣我們可以采用<source>標(biāo)簽指定多種格式的視頻，默認(rèn)情況下瀏覽器會自動啟動下載文件來確定其類型。

<video width="400" controls="controls">  
    <source src="move.mp4"  type="video/mp4" />  
    <source src="move.ogg"  type="video/ogg" />  
</video>

二、Video標(biāo)簽的屬性

video標(biāo)簽支持HTML5中的全局屬性和事件屬性

特有屬性如下：

屬性            值                    描述

autoplay     autoplay        如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。

controls       controls        如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。

height         pixels            設(shè)置視頻播放器的高度。

loop             loop            如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開始播放。

preload        preload

如果出現(xiàn)該屬性，則視頻在頁面加載時進行加載，并預(yù)備播放。

如果使用 "autoplay"，則忽略該屬性。

src    url    要播放的視頻的 URL。

width    pixels    設(shè)置視頻播放器的寬度。

大多數(shù)瀏覽器支持的視頻方法、屬性事件

方法                   屬性                     事件

play()                currentSrc            play

pause()            currentTime          pause

load()                videoWidth         progress

canPlayType    videoHeight         error

duration               timeupdate

ended                   ended

error                     abort

paused                 empty

muted                  emptied

seeking                waiting

volume                loadedmetadata

height

width

注釋：在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數(shù)據(jù)已加載后，其他屬性才可用。

三、從實例中了解Video標(biāo)簽的使用

<!DOCTYPE html>   
<html>   
<body>   
    <p style="text-align:center;">  
      <!--定義按鈕，并添加事件監(jiān)聽函數(shù)-->  
      <button onclick="playPause()">播放/暫停</button>   
      <button onclick="makeBig()">大</button>  
      <button onclick="makeNormal()">中</button>  
      <button onclick="makeSmall()">小</button>  
      <br />   
      <video id="video1" width="420" style="margin-top:15px;">  
        <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />  
          <p>您的瀏覽器不支持此HTML5標(biāo)簽</p>  
      </video>  
    </p>   
  
    <script type="text/javascript">  
        //得到video標(biāo)簽對象  
        var myVideo=document.getElementById("video1");  
  
        function playPause()  
        {   
            if (myVideo.paused)   
              myVideo.play();   
            else   
              myVideo.pause();   
        }   
  
        function makeBig()  
        {   
            myVideo.width=560;   
        }   
  
        function makeSmall()  
        {   
            myVideo.width=320;   
        }   
  
        function makeNormal()  
        {   
            myVideo.width=420;   
        }   
    </script>   
  
</body>   
</html>

HTML5之Video標(biāo)簽的用法

感謝各位的閱讀！關(guān)于“HTML5之Video標(biāo)簽的用法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

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

AI
助
手