Html 简明教程
HTML - Video Element
HTML*<video>* 元素用於在網頁中啟用影片播放支援。
HTML*<video>* element is used to enable video playback support within a web page.
它運作方式與 * <img>* 元素非常類似，因為它也需要在 * src attribute* 內加入影片的路徑或 URL。HTML 僅支援 MP4、WebM 和 Ogg 影片格式。 <video> 元素也支援音訊，但 <audio> 元素更適合於此目的。我們將在下一章節中介紹音訊元素。
It works very similarly to the <img> element as it also requires adding the path or URL of the video within the src attribute. The HTML supports only MP4, WebM, and Ogg video formats. The <video> element also supports audio however, the <audio> element is more suitable for that purpose. We will cover the audio element in the next chapter.
Syntax
<video width="450" height="250" controls>
<source src="url/of/video" type="video/webm">
</video>Examples of HTML video Element
以下是說明如何在網頁中使用影片元素的一些範例程式碼。
Following are some example codes that illustrate the use of video element in a webpage.
Embed a Video in HTML
若要將影片嵌入網頁中，我們需要設定 <video> 元素內的 src 屬性，該屬性指定影片的路徑或 URL。一個網頁為各種具有不同瀏覽器類型的使用者提供各式內容。如前所述，每個瀏覽器支援不同的影片格式 (MP4、WebM 和 Ogg)。因此，我們可以透過在 <video> 元素內包含多個 <source> tag 來提供 HTML 支援的所有格式。我們讓瀏覽器決定哪個格式更適合影片播放。
To embed a video inside a web page, we need to set the src attribute inside the <video> element that specifies the path or URL for video. A web page serves content to a wide variety of users with various types of browsers. Each browser supports different video formats (MP4, WebM, and Ogg) as mentioned earlier. Therefore, we can supply all the formats that HTML supports by including multiple <source> tag within <video> element. We let the browser decide which format is more suitable for video playback.
我們也可以啟用內建控制項，讓使用者可以控制音訊和影片播放（如果需要），只要使用 controls 屬性即可。它提供一個介面，讓使用者可以管理影片播放功能，例如音量調整、影片導覽（前進和後退）以及播放或暫停作業。
We can also enable the built-in controls for controlling audio and video playback to the users (if needed) with the help of controls attribute. It provides an interface that enables users to manage video playback functions such as volume adjustment, video navigation (forward and backwards) and play or pause operations.
以下範例顯示如何將影片的路徑或 URL 插入影片元素。
The following example shows how to insert the path or URL of video inside the video element.
<!DOCTYPE html>
<html>
<head>
<title>HTML Video Element</title>
</head>
<body>
<p>Playing video using video element</p>
<p>
The browser is responsible for determining
the appropriate format to use.
</p>
<video width="450" height="250" controls>
<source src="/html/media/video/sampleTP.webm"
type="video/webm">
<source src="/html/media/video/sampleTP.mp4"
type="video/mp4">
<source src="/html/media/video/sampleTP.ogv"
type="video/ogg">
<p>Sorry, video element is not supported!</p>
</video>
</body>
</html>Setting the Dimension of Video Display Area
To set the dimension of video display area, also known as the viewport, we can use the height and width attributes of the <video> element. These attributes define the height and width of the video viewport in pixels.
請注意影片會調整其長寬比（例如 4:3 和 16:9）以與指定的長度和高度對齊。因此，建議匹配視窗的尺寸以獲得更好的使用者體驗。
Note that the video will adjust its aspect ratio (e.g. 4:3 and 16:9) to align with the specified height and width. Therefore, it is advisable to match the dimensions of viewport for a better user experience.
我們來看一下下面的範例程式碼以進一步瞭解。
Let’s look at an example code below to understand better.
<!DOCTYPE html>
<html>
<head>
<title>
HTML Video Element
</title>
</head>
<body>
<p>Playing video using video element</p>
<video width="450" height="250" controls>
<source src="/html/media/video/sampleTP.mp4"
type="video/mp4">
</video>
</body>
</html>Autoplay and Looping of Video
我們可以使用 autoplay 和 loop 屬性設定影片自動在迴圈中播放。請記住，像 Chrome 70.0 這樣的幾個瀏覽器不支援自動播放功能，除非使用了 mute 屬性。因此，建議同時使用 autoplay 和 muted 屬性。
We can configure the video to play automatically in a loop by using the autoplay and loop attributes. Remember, a few browsers like Chrome 70.0 do not support autoplay feature unless the muted attribute is used. Therefore, it is recommended to use autoplay and muted attributes together.
以下範例說明 autoplay 和影片迴圈
The following example illustrates the autoplay and looping of video
<!DOCTYPE html>
<html>
<head>
<title>HTML Video Element</title>
</head>
<body>
<p>Playing video using video element</p>
<video width="450"
height="250"
autoplay
muted
loop>
<source src="/html/media/video/sampleTP.mp4"
type="video/mp4">
</video>
</body>
</html>Using a Thumbnail for the Video
我們可以在 <video> 元素的 poster 屬性中傳遞用作影片縮圖的圖片 URL。它會顯示指定的圖片，直到影片開始播放。
We can pass a URL of an image that works as a thumbnail for the video within the poster attribute of <video> element. It will display the specified image until the video starts playing.
以下範例中，我們示範 poster 屬性的使用
In the following example, we are illustrating the use of poster attribute
<!DOCTYPE html>
<html>
<head>
<title>HTML Video Element</title>
</head>
<body>
<p>Playing video using video element</p>
<video width="450"
height="250"
controls
muted
poster ="html/images/logo.png" >
<source src="/html/media/video/sampleTP.mp4"
type="video/mp4">
</video>
</body>
</html>