HTML5 Video：完整教程

一、 HTML5 Video 概述

HTML5 視頻的出現，使得網頁在視覺效果上更加炫麗，也讓網頁的內容更加生動形象。通過 HTML5 Video 標籤，我們可以在網頁上插入各種格式的視頻，而不需要任何插件。

HTML5 Video 是 HTML5 中引入的新標籤，並且受到了廣泛的支持。除了 Chrome、Firefox 等網頁瀏覽器，它還可以在移動設備上，如 iPhone、Android、Windows Phone 上的瀏覽器播放。

二、使用 HTML5 Video 標籤

要使用 HTML5 Video 標籤，我們需要了解以下幾個屬性：

<video src="movie.mp4"></video>

在上面的例子中，我們使用了 src 屬性來新建一個視頻標籤。請注意，src 屬性用來定義視頻的路徑及文件名。如果瀏覽器支持該視頻格式，則會自動加載和播放視頻。

除了 src 屬性外，還有其他重要的屬性：

1. width 和 height

width 和 height 屬性用於定義視頻播放器的寬度和高度，以像素為單位。

<video width="400" height="300" src="movie.mp4"></video>

2. controls

如果設置了 control 屬性，瀏覽器會自動添加視頻控件，包括播放/暫停、音量和進度條。

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

3. autoplay

autoplay 屬性用於在網頁加載後自動播放視頻。

<video src="movie.mp4" autoplay></video>

4. loop

loop 屬性用於指定視頻播放結束後是否重複播放。

<video src="movie.mp4" loop></video>

5. poster

poster 屬性用來設置播放器封面，即在播放器加載完成前顯示給用戶的圖片。

<video src="movie.mp4" poster="posterimage.jpg"></video>

三、多種格式的視頻

在使用 HTML5 Video 標籤時，我們需要考慮瀏覽器的支持情況。不同的瀏覽器支持的視頻格式不同，我們需要提供多種格式的視頻來達到最佳效果。

我們可以使用以下文件類型：

• MP4
• WebM
• Ogg

為了兼容不同的瀏覽器，我們可以這樣寫：

<video>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogv" type="video/ogg">
  您的瀏覽器不支持 video 標籤。
</video>

四、HTML5 Video 事件

HTML5 Video 還有一些內置的事件，我們可以利用這些事件來控制視頻的播放。

1. play()

play() 事件在用戶開始播放視頻時觸發。

<video id="myVideo" src="movie.mp4"></video>

<script>
  var vid = document.getElementById("myVideo");
  vid.play();
</script>

2. pause()

pause() 事件在用戶暫停視頻時觸發。

<video id="myVideo" src="movie.mp4"></video>

<script>
  var vid = document.getElementById("myVideo");
  vid.pause();
</script>

3. ended()

ended() 事件在視頻播放結束時觸發。

<video id="myVideo" src="movie.mp4"></video>

<script>
  var vid = document.getElementById("myVideo");
  vid.onended = function() {
    alert("The video has ended");
  };
</script>

4. timeupdate()

timeupdate() 事件在視頻的當前播放時間發生變化時觸發。

<video id="myVideo" src="movie.mp4"></video>

<script>
  var vid = document.getElementById("myVideo");
  vid.ontimeupdate = function() {
    alert("The current playback position is " + vid.currentTime);
  };
</script>

五、結論

HTML5 Video 是網頁製作中必不可少的一部分，它可以使網頁更加生動形象，同時也可以提高用戶的體驗。通過學習本文的內容，您現在已經擁有了 HTML5 Video 的完整教程，趕緊動手試試吧！