在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%"
controls
autoplay <!-- 自动播放（需静音） -->
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)：
WEBVTT
00: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>
通过以上方法，可以在现代浏览器中高效嵌入视频并提供良好的用户体验。