插入視頻: <video>

4.1 <video> 標籤基礎

使用 <video> 元素將視頻嵌入到網頁上，可以直接在瀏覽器中播放視頻內容。 這個元素提供了多種播放控制選項，包括支持不同格式、通過 JavaScript 屬性和方法進行的控制。讓我們仔細看看這個元素。

最簡單的例子

<video> 標籤常與 src 屬性一起使用，以指定視頻文件的路徑。你還可以添加 controls 屬性來顯示標準控制元件，比如播放、暫停和音量控制按鈕。

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

多來源示例

為了支持不同的瀏覽器，可以使用 <source> 標籤指定多個視頻來源。 這讓瀏覽器可以選擇支持的視頻格式。

    
      <video controls>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>
    
  

<video> 標籤的屬性

• src: 指定視頻文件的路徑
• controls: 顯示播放控制元件
• autoplay: 頁面加載時自動播放視頻
• loop: 影片播放結束後重複播放
• muted: 加載時消除音效
• preload: 指定瀏覽器如何加載視頻。可能的值有：none, metadata, auto
• width 和 height: 設置視頻播放器的寬度和高度
• poster: 指定在視頻開始播放前顯示的佔位符圖像

4.2 主要屬性

1. 自動播放

autoplay 屬性讓視頻文件在頁面加載後自動開始播放。 就像音頻一樣，這個屬性需要謹慎使用，以免惹惱用戶。

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

2. 循環播放

loop 屬性指定視頻文件應以無限循環播放。 這在背景視頻或動畫中非常有用。

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

3. 靜音

muted 屬性在加載時禁用視頻音效。這可以方便你希望視頻默認靜音播放，用戶可以在需要時打開聲音。

    
      <video src="videofile.mp4" muted></video>
    
  

4. 預加載

preload 屬性指示瀏覽器在頁面加載時如何加載視頻文件。 它可以取三個值之一：

• none: 瀏覽器不會預加載視頻
• metadata: 僅加載元數據（持續時間、尺寸等）
• auto: 頁面加載時完全加載視頻

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. 海報圖片

poster 屬性指定在視頻開始播放前顯示的佔位符圖像。 這可以幫助向用戶提供視頻內容的可視信息。

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

4.3 支持的視頻格式

為了保證跨瀏覽器兼容性，建議使用多種視頻格式。 最常用的格式包括 MP4、WebM 和 OGG。

MP4 格式

MP4 (MPEG-4 Part 14) 是最流行的視頻格式之一。大多數瀏覽器和設備都支持該格式。 MP4 使用有損壓縮，能在相對較小的文件大小下提供良好的視頻質量。

示例：

    
      <video src="videofile.mp4" type="video/mp4"></video>
    
  

WebM 格式

WebM 是一種為互聯網使用而設計的開放視頻壓縮格式。大多數現代瀏覽器都支持並提供良好的視頻質量。

示例：

    
      <video src="videofile.webm" type="video/webm"></video>
    
  

OGG 格式

OGG (Ogg Theora) 是一種受許多瀏覽器支持的開放視頻格式。 這種格式提供良好的視頻質量，通常作為 MP4 和 WebM 的替代方案使用。

示例：

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

確保兼容性的多格式示例

為了保證跨瀏覽器的兼容性，建議指定多個不同格式的視頻源。 瀏覽器會選擇第一個支持的格式。

    
      <video width="600" controls autoplay muted>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Your browser does not support the video element.
      </video>