在HTML5中嵌入視頻主要使用<video>標簽，這是一種簡單且標準的方式。以下是詳細步驟和示例：
基礎實現
<!DOCTYPE html>
<html>
<head><title>視頻嵌入示例</title>
</head>
<body><!-- 基礎視頻播放器 --><video width="640" height="360" controls><source src="your-video.mp4" type="video/mp4"><source src="your-video.webm" type="video/webm">您的瀏覽器不支持HTML5視頻標簽。</video>
</body>
</html>
核心屬性說明
-
controls
添加播放控件（播放/暫停、進度條、音量等） -
width和height
設置播放器尺寸（單位：像素） -
<source>標簽
提供多個視頻格式源以提高兼容性（瀏覽器會選擇第一個支持的格式）：- MP4 (H.264) - 兼容性最好
- WebM - 開源格式，Chrome/Firefox支持
- Ogg - 舊版Firefox支持
-
后備文本
當瀏覽器不支持<video>標簽時顯示提示文本（示例中的“您的瀏覽器不支持…”）
進階功能示例
<video id="myVideo"width="100%" controlsautoplay <!-- 自動播放（需靜音） -->muted <!-- 默認靜音 -->loop <!-- 循環播放 -->poster="thumbnail.jpg" <!-- 視頻封面圖 -->preload="metadata" <!-- 預加載元數據 -->
><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"><track src="subtitles.vtt" kind="subtitles" srclang="en" label="English"> <!-- 字幕 -->
</video>
重要注意事項
-
自動播放限制
現代瀏覽器要求autoplay必須配合muted使用（防止騷擾用戶）：<video autoplay muted>...</video> -
響應式設計
設置CSS確保視頻自適應：video {max-width: 100%;height: auto; } -
跨瀏覽器格式兼容
格式 支持瀏覽器 MP4 Chrome, Edge, Safari, Firefox WebM Chrome, Firefox, Edge Ogg Firefox（舊版）
高級技巧
自定義控制條（使用JavaScript API）
<video id="customVideo" poster="preview.jpg"><source src="video.mp4" type="video/m4">
</video><div class="controls"><button onclick="playPause()">播放/暫停</button><input type="range" id="volume" min="0" max="1" step="0.1" value="1">
</div><script>const video = document.getElementById('customVideo');// 播放/暫停切換function playPause() {video.paused ? video.play() : video.pause();}// 音量控制document.getElementById('volume').addEventListener('change', (e) => {video.volume = e.target.value;});
</script>
常用JavaScript方法
video.play(); // 播放
video.pause(); // 暫停
video.currentTime = 30; // 跳轉到30秒
video.volume = 0.5; // 設置音量(0~1)
字幕支持
使用<track>標簽添加字幕（WebVTT格式）：
<video controls><source src="video.mp4" type="video/mp4"><track src="subs/chinese.vtt" kind="subtitles" srclang="zh" label="中文字幕" default>
</video>
字幕文件示例 (chinese.vtt)：
WEBVTT00:00:01.000 --> 00:00:04.000
你好！這是一個視頻示例00:00:05.000 --> 00:00:08.000
HTML5視頻嵌入很簡單
最佳實踐建議
-
視頻壓縮
使用工具壓縮視頻（如 HandBrake），推薦配置：- MP4: H.264編碼 + AAC音頻
- 分辨率：根據需求適配（720p/1080p）
- 碼率：1.5-5 Mbps（平衡畫質和加載速度）
-
CDN加速
大視頻文件使用CDN分發（如AWS CloudFront、Cloudflare） -
備用方案
兼容舊版IE：<!-- 在<video>標簽內添加Flash備用 --> <object data="flash-player.swf"><param name="movie" value="your-video.mp4"> </object> -
懶加載優化
<video controls preload="none" poster="preview.jpg"><!-- 當用戶點擊時才加載視頻 --> </video>
通過以上方法，可以在現代瀏覽器中高效嵌入視頻并提供良好的用戶體驗。
