卡卡網(wǎng)

在本文中，將詳細(xì)介紹 HTML5 的 video 標(biāo)簽。<video>標(biāo)簽用于在文檔中嵌入視頻內(nèi)容，例如電影剪輯或其他視頻流。

顧名思義，<video>標(biāo)簽用于在瀏覽器上顯示視頻文件。你可以使用此標(biāo)簽在你的網(wǎng)站上顯示你創(chuàng)建的視頻。在網(wǎng)站上顯示的視頻文件類型存在限制，只能使用.mp4、.webm和.ogg文件類型。除此之外，其他格式的視頻不會(huì)顯示在網(wǎng)頁上。

現(xiàn)在，僅將這些標(biāo)簽放在 HTML 文本中并不能保證視頻會(huì)被顯示。必須指定視頻的路徑。你可以使用<source>標(biāo)簽來做到這一點(diǎn)。

句法

<video>
         <source src="video-path.mp4" type="video/mp4">
</video>

以上是<video>標(biāo)簽的語法。如你所見，我們使用“src”屬性提供了 mp4 文件的路徑。這將在你的網(wǎng)站上顯示你的視頻。

<video>標(biāo)簽有許多可用的屬性，它允許你為你的視頻做幾乎任何事情。讓我們看看屬性。

屬性

HTML 標(biāo)簽中的屬性用于向我們的標(biāo)簽添加一些自定義功能。它用于提供有關(guān)你的標(biāo)簽的額外信息，例如控件、寬度、高度等。我們?cè)谏厦嬉呀?jīng)看到，僅提供<video>標(biāo)簽是不夠的。你必須將屬性 'src' 與<source>標(biāo)簽一起寫入，并傳遞視頻的路徑才能顯示視頻。以下是你可以在<video>標(biāo)記內(nèi)使用的屬性列表。

• width和height 高度和寬度屬性用于指定 HTML 中視頻大小的高度和寬度。通常，每個(gè)視頻都有特定的尺寸，例如16×9（垂直視圖）或9×16（水平視圖）。同樣，你可以選擇視頻分辨率的寬度和高度。

讓我們看一個(gè)例子

<video>
  <source src="bridge.mp4" type="video/mp4">
</video>

<video width="320" height="240">
  <source src="bridge.mp4" type="video/mp4">
</video>

demodownload

運(yùn)行此代碼后，你可以看到以下輸出。

我希望你能理解視頻的大小是如何改變的。在這些屬性中傳遞的值的單位始終是像素。值越大，尺寸越大。

• controls 此為控件屬性，允許我們顯示各種控件，例如播放、暫停、音量調(diào)整、全屏圖標(biāo)和3個(gè)點(diǎn)（它甚至可以讓你在視頻上下載視頻文件）。你只需將控件編寫為屬性。 

讓我們看看這個(gè)例子

<video controls>
  <source src="bridge.mp4" type="video/mp4">
</video>

demodownload

以下是輸出

在輸出上，你現(xiàn)在可以看到播放和暫停按鈕、全屏按鈕等控件。

• poster 視頻海報(bào)設(shè)置。每當(dāng)視頻顯示在屏幕上時(shí)，下載和顯示都需要一些時(shí)間。如果文件較大且連接性較低，你可能會(huì)看到加載圖標(biāo)。相反，你可以使用海報(bào)屬性在視頻上添加圖像，該圖像在視頻完全加載后消失。 

讓我們看看這個(gè)例子

<video controls poster="image.png">
  <source src="bridge.mp4" type="video/mp4">
</video>

demodownload

以下是輸出

請(qǐng)注意，顯示的是圖像而不是加載圖標(biāo)。除非你播放視頻，否則圖像將一直存在。

• muted 此屬性是靜音設(shè)置，假設(shè)你的視頻有一些音樂，并且你不希望它在視頻播放時(shí)開始播放。你可以使用此屬性來執(zhí)行此操作。 

讓我們看看這個(gè)例子。

<video controls muted>
  <source src="ocean.mp4" type="video/mp4">
</video>

demodownload

播放視頻時(shí)，你不會(huì)聽到任何聲音，因?yàn)橐曨l將被靜音。

• autoplay 此屬性的作用是在視頻完全下載后立即自動(dòng)播放視頻。用戶不必按下播放按鈕，因?yàn)橐曨l會(huì)自行開始。這里唯一的限制是你必須使用“靜音”屬性和“自動(dòng)播放”屬性。

例子

<video autoplay muted controls>
  <source src="bridge.mp4" type="video/mp4">
</video>

demodownload

• loop 此屬性允許我們無限次重復(fù)特定視頻。視頻一結(jié)束，一切就會(huì)重新開始。

讓我們看看這個(gè)例子。

<video controls loop>
  <source src="bridge.mp4" type="video/mp4">
</video>

demodownload

將視頻播放到最后，你會(huì)看到視頻又從頭開始播放。

• preload 此屬性允許你詢問用戶他們希望在頁面加載后如何加載你的視頻。它基本上具有三個(gè)值 - auto、metadata和none。
  auto值將在頁面加載時(shí)加載整個(gè)視頻。
  metadata頁面加載時(shí)，元數(shù)據(jù)值將僅加載視頻的元數(shù)據(jù)。
  none值在頁面加載時(shí)根本不會(huì)加載視頻。

<video controls preload="auto">
  <source src="bridge.mp4" type="video/mp4">
</video>

<video controls preload="metadata">
  <source src="bridge.mp4" type="video/mp4">
</video>

<video controls preload="none">
  <source src="bridge.mp4" type="video/mp4">
</video>

• 全局屬性

HTML 提供了一些全局屬性。正如名字所說的“全局”，我們可以得到這些屬性可以被 HTML 的所有元素使用的提示。下面是所有全局屬性的列表。

• 事件屬性

HTML 有一些全局事件屬性，只要瀏覽器上發(fā)生事件，就會(huì)調(diào)用這些屬性，例如鼠標(biāo)單擊、keyup、keydown、mousemove、onload、ondrag等。與瀏覽器界面交互的任何操作都是一個(gè)事件。<video>標(biāo)簽支持所有這些。

總結(jié)

本文詳細(xì)介紹了HTML5中的<video>視頻標(biāo)簽及其用法。弄清<video>視頻標(biāo)簽各個(gè)屬性的含義，我們就可以在網(wǎng)頁上輕松創(chuàng)建自己的視頻。

相關(guān)文章

• hivideo——網(wǎng)頁不用flash播放mp4視頻文件

標(biāo)簽: 視頻標(biāo)簽  video標(biāo)簽