html5怎么播放視頻

# HTML5怎么播放視頻

HTML5通過`<video>`標簽原生支持視頻播放功能，無需依賴Flash等插件。本文將詳細介紹如何使用HTML5實現視頻播放，包括基礎用法、屬性控制、事件監聽以及兼容性處理等內容。

## 一、基礎視頻播放

### 1. 基本語法
```html
<video src="video.mp4" controls>
  您的瀏覽器不支持HTML5視頻
</video>

• src：指定視頻文件路徑
• controls：顯示默認播放控件（播放/暫停、進度條等）
• 標簽內的文字會在瀏覽器不支持時顯示

2. 多格式支持

不同瀏覽器支持的視頻格式不同，建議提供多種格式：

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogv" type="video/ogg">
</video>

瀏覽器會按順序嘗試加載第一個支持的格式。

二、常用屬性控制

示例：

<video controls autoplay muted loop poster="preview.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

三、JavaScript控制播放

1. 基本方法

const video = document.querySelector('video');

// 播放
video.play(); 

// 暫停
video.pause();

// 跳轉到指定時間（秒）
video.currentTime = 10;

2. 常用屬性

// 獲取/設置音量（0-1）
video.volume = 0.5;

// 是否靜音
video.muted = true;

// 獲取視頻時長
video.duration;

3. 事件監聽

video.addEventListener('play', () => {
  console.log('視頻開始播放');
});

video.addEventListener('ended', () => {
  console.log('視頻播放結束');
});

video.addEventListener('timeupdate', () => {
  console.log('當前播放位置：', video.currentTime);
});

四、進階功能實現

1. 自定義控制條

通過隱藏默認控件并自行創建按鈕實現：

<video id="myVideo" src="video.mp4"></video>
<div class="controls">
  <button onclick="document.getElementById('myVideo').play()">播放</button>
  <button onclick="document.getElementById('myVideo').pause()">暫停</button>
  <input type="range" onchange="video.currentTime=this.value">
</div>

2. 全屏控制

// 進入全屏
video.requestFullscreen();

// 退出全屏
document.exitFullscreen();

五、兼容性處理

1. 檢測瀏覽器支持

if(!!document.createElement('video').canPlayType) {
  // 支持HTML5視頻
} else {
  // 回退方案（如Flash播放器）
}

2. 移動端注意事項

• iOS需要添加playsinline屬性實現內聯播放
• 部分瀏覽器限制自動播放，需用戶交互后觸發

六、最佳實踐建議

1. 優先使用MP4(H.264)+WebM雙格式組合
2. 視頻壓縮建議：
   • 分辨率：根據需求選擇1080p/720p
   • 碼率：1.5-3Mbps（高清）
3. 考慮使用CDN加速視頻加載
4. 大視頻建議分片加載（HLS/DASH）

通過HTML5視頻技術，開發者可以輕松創建跨平臺的視頻播放體驗。結合JavaScript API還能實現更豐富的交互功能，如彈幕、倍速播放等高級特性。 “`