初學者指南：HTML <video> 標籤

By徐培鈞
LinkedIn

更新日期： 2024 年 10 月 15 日

在現代網站中，影片是非常常見的媒體形式之一，它可以使網站內容更具吸引力和互動性。

HTML 提供了一個簡單易用的標籤來嵌入影片，這就是 <video> 標籤。

對於初學者來說，理解如何使用 <video> 標籤，可以幫助你輕鬆地將影片添加到你的網頁中，並提高網站的吸引力。

這篇文章將帶你了解如何使用 <video> 標籤，並介紹一些常見的屬性和技巧。

什麼是 <video> 標籤？

<video> 標籤是一個 HTML 元素，用於在網頁中嵌入影片文件。

它使得網頁能夠直接播放影片，並且支持多種格式，比如 MP4、WebM 和 Ogg。

使用 <video> 標籤，開發者可以很方便地在網頁中展示影片，並提供播放控制功能。

基本語法

以下是 <video> 標籤的基本結構：

<video controls>
  <source src="https://cdn.pixabay.com/video/2023/11/28/191159-889246512_large.mp4" type="video/mp4">
  您的瀏覽器不支援此影片格式。
</video>

在這段代碼中，<video> 標籤包含了 <source> 子標籤，用於指定影片的來源和格式。

如果瀏覽器不支持該格式，會顯示替代文本 “您的瀏覽器不支援此影片格式”。

<video> 標籤的常見屬性

src

src 屬性用於指定影片文件的路徑或網址。

它可以直接放在 <video> 標籤中，也可以放在 <source> 標籤中。

<video src="https://cdn.pixabay.com/video/2023/11/28/191159-889246512_large.mp4" type="video/mp4" controls>
</video>

當使用 <video> 的 src 屬性時，只能指定一個影片源，而 <source> 標籤則可以指定多個來源，以增加瀏覽器兼容性。

例如，不同的瀏覽器支持的影片格式可能不同，通過使用多個 <source> 標籤，你可以提供 MP4、WebM 和 Ogg 等多種格式，確保大多數瀏覽器都能找到支持的格式來播放影片。

controls

controls 屬性會為影片添加播放控制，例如播放、暫停、音量調節等按鈕。

<video controls>
  <source src="https://cdn.pixabay.com/video/2023/11/28/191159-889246512_large.mp4" type="video/mp4">
</video>

autoplay

autoplay 屬性使影片在網頁加載完成後自動播放。

需要注意的是，某些瀏覽器會出於用戶體驗考量阻止自動播放，若需要自動播放可以考慮加入 muted 屬性。

<video autoplay>
  <source src="https://cdn.pixabay.com/video/2023/11/28/191159-889246512_large.mp4" type="video/mp4">
</video>

loop

loop 屬性使影片播放結束後自動重新開始，形成循環播放。

若單獨設定 loop 屬性則無法正常播放影片，需要搭配 control 屬性才行。

<video loop>
  <source src="https://cdn.pixabay.com/video/2023/11/28/191159-889246512_large.mp4" type="video/mp4">
</video>

muted

muted 屬性使影片在加載時靜音，這通常和 autoplay 屬性一起使用，以避免驚擾用戶。

<video autoplay muted>
  <source src="https://cdn.pixabay.com/video/2023/11/28/191159-889246512_large.mp4" type="video/mp4">
</video>

poster

poster 屬性允許你指定一張圖片，在影片加載或等待播放時顯示，作為影片的預覽圖。

<video controls poster="https://cdn.pixabay.com/photo/2023/06/14/23/12/sunset-8064078_1280.jpg">
  <source src="https://cdn.pixabay.com/video/2023/11/28/191159-889246512_large.mp4" type="video/mp4">
</video>

支援多種格式

不同的瀏覽器支持不同的影片格式，因此為了確保影片能在各種瀏覽器上正常播放，通常會提供多種格式的影片源。常見的格式包括：

  • MP4：使用 H.264 編碼，是最常見的影片格式，大多數瀏覽器都支持。
  • WebM：使用 VP8/VP9 編碼，主要目標是高效壓縮，適合網頁使用。
  • Ogg：使用 Theora 編碼，一些開源的瀏覽器支持此格式。

以下是提供多種格式的示例：

<video controls poster="preview.jpg">
  <source src="example.mp4" type="video/mp4">
</video>

這樣寫可以確保當某一個格式不被支持時，瀏覽器可以使用其他格式來播放影片。

常見問題

為什麼我的影片沒有聲音？

這可能是因為你使用了 muted 屬性，或者你的瀏覽器默認靜音自動播放的影片。此外，檢查音量控制是否正確配置也是一個好的解決方案。

如何提高影片在不同設備上的兼容性？

要提高兼容性，可以提供多種影片格式的源文件（例如 MP4、WebM、Ogg）。另外，使用 controls 屬性可以確保不同設備的用戶都有基本的播放控制權限。

如何防止影片自動播放？

默認情況下，影片不會自動播放。如果你已經添加了 autoplay 屬性，只需將其移除即可。如果影片仍自動播放，請檢查頁面上的 JavaScript 是否控制了這一行為。

結論

HTML 的 <video> 標籤是一個強大的工具，它使得在網頁中嵌入影片變得非常簡單。

通過使用不同的屬性，例如 controls、autoplay、loop 等，你可以更靈活地控制影片的行為，提供更好的用戶體驗。

對於初學者來說，學會使用 <video> 標籤是創建豐富互動網頁的第一步。

希望這篇文章能幫助你更好地了解如何在網頁中使用 <video> 標籤，讓你能自信地在網站中添加影片。

如果有任何問題，隨時告訴我，我們一起學習更多有關 HTML 的知識！

Similar Posts