HTML - 影片元素

歡迎，有志於網頁開發的各位！今天，我們將要深入HTML5中最令人興奮的元素之一——影片元素。記得上個我們還得依賴第三方插件來線上看影片的日子嗎？那些日子已經一去不返，多虧了這個小巧的標籤。所以，讓我們一起踏上這趟旅程，並解鎖HTML影片元素的威力！

HTML - Video Element

語法

在我們進入有趣的部分之前，讓我們從基礎開始。HTML影片元素有一個簡單的語法，很容易記住：

<video src="movie.mp4" controls>
您的瀏覽器不支援影片標籤。
</video>

這是影片元素最基本的形式。讓我們來分解它：

<video>：這是開啟標籤，告訴瀏覽器我們正在嵌入式影片。
src="movie.mp4"：這個屬性指定了我們影片文件的來源。
controls：這個屬性為影片播放器添加了播放控制（播放、暫停、音量）。
開啟標籤和關閉標籤之間的文本將在瀏覽器不支援影片元素時顯示。

現在，你可能會想，「就這樣？」其實不然！我們可以用這個強大的元素做很多事。讓我們進一步探索！

HTML影片元素的範例

範例1：基本影片嵌入式

<video src="cute_kitten.mp4" controls width="320" height="240">
抱歉，您的瀏覽器不支援嵌入式影片。
</video>

在這個範例中，我們添加了width和height屬性來控制我們影片播放器的大小。這就像買電視一樣——你可以選擇你想要的大小！

範例2：多個來源文件

<video controls width="320" height="240">
<source src="cute_kitten.mp4" type="video/mp4">
<source src="cute_kitten.webm" type="video/webm">
<source src="cute_kitten.ogg" type="video/ogg">
您的瀏覽器不支援影片標籤。
</video>

這裡有點意思了！我們使用<source>元素提供了多個影片來源。為什麼？因為不同的瀏覽器支援不同的影片格式。透過提供多個來源，我們可以確保我們的影片能在尽可能多的瀏覽器上播放。這就像帶著不同的零食去派對一樣——每人都有份！

範例3：自動播放和靜音

<video src="background_video.mp4" autoplay muted loop>
您的瀏覽器不支援影片標籤。
</video>

這個範例引入了三個新的屬性：

autoplay：影片一準備好就會開始播放。
muted：影片會無聲播放。
loop：影片播完後會重新開始。

這種組合對於網頁背景影片來說非常完美。就像在你的網頁背景中播放著重複的無聲電影！

範例4：海報圖片

<video src="movie_trailer.mp4" controls poster="movie_poster.jpg">
您的瀏覽器不支援影片標籤。
</video>

poster屬性讓您可以指定在影片下載時或直到用戶點擊播放按鈕前顯示的圖片。這就像DVD的封面——它給觀眾預覽他們即將觀看的內容！

不同影片格式的瀏覽器支援

現在，讓我們來談談瀏覽器支援。並非所有瀏覽器都支援所有影片格式，這就是為什麼提供多個來源很重要的原因。這裡有一個方便的表格，顯示哪些瀏覽器支援哪些格式：

影片格式	Chrome	Firefox	Safari	Edge	Internet Explorer
MP4	是	是	是	是	是 (9+)
WebM	是	是	否	是	否
Ogg	是	是	否	否	否

如您所見，MP4是最廣泛支援的格式。然而，包括您的影片的WebM和Ogg版本可以確保與舊版瀏覽器的兼容性。

最佳實踐

始終包含controls屬性，除非你有充分的理由不這麼做。用戶喜歡能夠控制影片播放。
提供不同格式的多個來源文件，以確保最大化的瀏覽器兼容性。
使用poster屬性給用戶預覽影片。
注意自動播放的使用。雖然它對背景影片很有用，但如果過度使用，可能會讓用戶感到煩躁。
總是在<video>標籤中包含備用內容，以供不支援元素的瀏覽器使用。

總結來說，HTML影片元素是一個強大的工具，讓我們能夠輕鬆地在網頁中嵌入影片，而不需要依賴第三方插件。它靈活、廣泛支援且易於使用。

記住，掌握網頁開發的關鍵在於練習。所以，去吧，在你的網頁中嘗試嵌入一些影片！試試不同的屬性，看看哪個對你的需求最有效。誰知道呢？你可能會成為網絡影片串流界的下一個大熱！

祝開發愉快，未來的網頁魔法師們！

Credits: Image by storyset