HTML - <video> 標籤

HTML <video> 標籤用於將影片媒體播放器嵌入網站。為了正確渲染，您應該提供各種影片格式，因為並非所有瀏覽器都支援相同的格式。在 <source> 標籤或 src 屬性中巢狀影片檔案的路徑。如果瀏覽器不支援影片格式，則可以選擇在 <video> 標籤中提供替代文字，該文字將顯示出來。

<video> 元素支援三種影片格式：MP4/MPEG 4、WebM 和 Ogg。

語法

<video src="..." controls></video>

屬性

HTML video 標籤支援 HTML 的全域性和事件屬性，以及一些列出的特定屬性。

屬性	值	描述
autoplay	autoplay	指定影片將自動播放。
controls	controls	指定顯示影片控制元件。
height	畫素	指定影片媒體播放器的高度。
loop	loop	指定影片播放結束後會再次開始。
muted	muted	指定音訊應靜音。
poster	URL	指定在影片下載期間顯示的影像。
preload	auto metadata none	指定作者認為最能帶來最佳使用者體驗的內容。
src	URL	指定影片路徑的 URL。
width	畫素	指定影片媒體播放器的寬度。

HTML video 標籤示例

下面的示例將演示 video 標籤的使用方法、何時何地使用它來渲染影片播放器以及如何使用 CSS 操作影片播放器。

使用 Video 標籤建立影片播放器

讓我們看下面的例子，我們將把 preload 屬性的值設定為“auto”，這會在頁面載入時載入整個影片。

<!DOCTYPE html>
<html>
<body>
    <center>
        <video width="400" height="200" controls preload="auto">
        <source src=
"https://cdn.pixabay.com/vimeo/165221419/ipad-2988.mp4?width=640&hash=4816e81143efa7f31f1e8c86c5605f43fdfac941" 
      type="video/mp4">
        </video>
   </center>
</body>
</html>

帶有控制元素的影片播放器

下面的例子中，我們將使用 controls 屬性，該屬性用於新增播放、暫停、音量等控制元件。

<!DOCTYPE html>
<html>
<body>
    <center>
        <video width="420" height="250" controls>
        <source src=
"https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" 
      type="video/mp4">
        </video>
    </center>
</body>
</html>

頁面載入後自動播放影片

在下面的例子中，我們將使用 autoplay 屬性使影片自動開始播放。

<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6">
    <center>
        <video width="420" height="250" autoplay>
        <source src=
"https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" 
      type="video/mp4">
        </video>
    </center>
</body>
</html>

帶有播放和暫停按鈕的影片播放器

考慮下面的例子，我們在這裡執行指令碼並新增播放/暫停、大螢幕和小螢幕等事件。

<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
    <div style="text-align:center">
        <button onclick="Pauseplay()">PLAY/PAUSE</button>
        <button onclick="BScreen()">BIG SCREEN</button>
        <button onclick="SScreen()">SMALL SCREEN</button>
        <br>
        <video id="tutorial" width="400">
        <source src=
"https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" 
      type="video/mp4">
        </video>
    </div>
    <script>
        var testvideo = document.getElementById("tutorial");
        function Pauseplay() {
           if (testvideo.paused) testvideo.play();
           else testvideo.pause();
        }
        function BScreen() {
           testvideo.width = 500;
        }
        function SScreen() {
           testvideo.width = 200;
        }
    </script>
</body>
</html>

支援的瀏覽器

標籤
video	是 4.0	是 9.0	是 3.5	是 3.1	是 11.5

html_tags_reference.htm

列印頁面