在本文中，將詳細介紹 HTML5 的 video 標簽。<video>標簽用于在文檔中嵌入視頻內容，例如電影剪輯或其他視頻流。

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

現在，僅將這些標簽放在 HTML 文本中并不能保證視頻會被顯示。必須指定視頻的路徑。你可以使用<source>標簽來做到這一點。

句法

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

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

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

屬性

HTML 標簽中的屬性用于向我們的標簽添加一些自定義功能。它用于提供有關你的標簽的額外信息，例如控件、寬度、高度等。我們在上面已經看到，僅提供<video>標簽是不夠的。你必須將屬性 'src' 與<source>標簽一起寫入，并傳遞視頻的路徑才能顯示視頻。以下是你可以在<video>標記內使用的屬性列表。

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

讓我們看一個例子

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

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

demodownload

運行此代碼后，你可以看到以下輸出。

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

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

讓我們看看這個例子

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

demodownload

以下是輸出

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

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

讓我們看看這個例子

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

demodownload

以下是輸出

請注意，顯示的是圖像而不是加載圖標。除非你播放視頻，否則圖像將一直存在。

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

讓我們看看這個例子。

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

demodownload

播放視頻時，你不會聽到任何聲音，因為視頻將被靜音。

• autoplay 此屬性的作用是在視頻完全下載后立即自動播放視頻。用戶不必按下播放按鈕，因為視頻會自行開始。這里唯一的限制是你必須使用“靜音”屬性和“自動播放”屬性。

例子

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

demodownload

• loop 此屬性允許我們無限次重復特定視頻。視頻一結束，一切就會重新開始。

讓我們看看這個例子。

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

demodownload

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

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

<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 有一些全局事件屬性，只要瀏覽器上發生事件，就會調用這些屬性，例如鼠標單擊、keyup、keydown、mousemove、onload、ondrag等。與瀏覽器界面交互的任何操作都是一個事件。<video>標簽支持所有這些。

總結

本文詳細介紹了HTML5中的<video>視頻標簽及其用法。弄清<video>視頻標簽各個屬性的含義，我們就可以在網頁上輕松創建自己的視頻。

相關文章

• hivideo——網頁不用flash播放mp4視頻文件

標簽: 視頻標簽  video標簽