HTML中如何新增、播放和控制影片

隨著網路科技的發展，越來越多的網站開始使用影片來展示內容。對於網站開發者來說，如何在網頁中添加影片並讓影片正常播放，是較常見的問題。本文將介紹HTML中如何新增、播放和控制影片。

一、HTML5 中的 Video 標籤

在 HTML5 中加入影片的方法是在 HTML 程式碼中加入影片標記。具體來說，使用如下標記:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

這段程式碼中，「src」屬性用來定義視訊檔案的URL，如上程式碼中的「movie.mp4」和「movie.ogg」分別表示影片的MP4 和OGG 格式。如果瀏覽器支援影片播放，將會選擇其中一個播放，如果都不支持，就會顯示最後一個標籤內的內容「Your browser does not support the video tag.」。

其中，「width」 和 「height」 可以用來指定影片的寬高大小。 controls 屬性用於新增視訊播放器的控制條。

二、控制影片播放

新增影片後，我們可以透過以下程式碼控制影片：

var video = document.getElementsByTagName("video")[0];
video.play(); //播放
video.pause(); //暂停
video.currentTime = 0; //设置当前时间为 0 秒
video.volume = 0.5; //设置音量为一半

其中，「play()」和「pause() 」函數分別用於播放和暫停視頻，currentTime 屬性用於設定視頻播放的當前時間，volume 屬性用於設定視頻的音量大小。

三、支援多種格式的影片檔案

為了讓更多的瀏覽器都能支援影片播放，可以採用多種格式的影片文件，同時提供多個 sources。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

這裡針對不同的瀏覽器和作業系統提供了三種不同的格式，盡量確保影片覆蓋的廣度。

四、視頻預加載選項

HTML5 中的視頻標籤還提供了 preload 屬性，可以選擇在頁面加載的時候預先下載視頻，以免出現視頻卡頓的情況。

支援 preload 屬性的值有三種：

• preload = "none" ：不預先下載。
• preload = "metadata" ：下載影片的元數據，例如：影片長度、音軌等資訊。
• preload = "auto" ：下載整個影片檔案。

當 preload 屬性賦值為 “auto” 時，影片會在頁面載入過程中進行下載，這時候可以透過 JavaScript 取得影片的載入狀態。

var video = document.getElementsByTagName("video")[0];
video.load(); //下载整个视频文件
console.log(video.buffered.end(0)); //输出已下载部分

五、網頁中使用 YouTube 影片

除了透過影片標籤直接嵌入影片檔案之外，還可以透過嵌入 YouTube 影片的方式進行影片播放。具體實作方式如下：

• 首先需要在 YouTube 上找到要嵌入的影片。
• 在頁面中新增以下 HTML 程式碼：

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

ps：此處的「VIDEO_ID」 是該影片的唯一識別碼。

• 然後按照標準的方式來進行 CSS 樣式的調整。

六、瀏覽器相容性

HTML5 中新增影片的方法，在現代瀏覽器中，已經得到了廣泛的支持，但還有一些較老的瀏覽器存在不支援HTML5 影片的問題。這些瀏覽器可以透過 JavaScript 和 Flash 來支援影片播放。

• 透過 JavaScript：可以使用函式庫如 video.js 或 JWPlayer。
• 透過 Flash：透過 swfobject 和 swfmedia 在頁面中嵌入 Flash 播放器，然後再載入影片。

總結

本文介紹了 HTML 中如何添加、播放和控制視頻，並對常用的一些播放特性進行了介紹。在實際開發過程中，開發者應注意相容性問題，提供多種不同格式的影片文件，確保每個瀏覽器都能完美支援影片播放。

以上是HTML中如何新增、播放和控制影片的詳細內容。更多資訊請關注PHP中文網其他相關文章！