一、概念定义
HTML5 <video> 标签提供了原生视频播放功能，无需依赖第三方插件（如Flash），支持多种视频格式和自定义控制，是现代网页中嵌入视频的标准解决方案。其核心价值在于简化多媒体集成流程，提升跨设备兼容性和用户体验。
二、语法规则
2.1 基础语法结构
<video
src="视频文件路径"
[属性1]
[属性2]
>
<!-- 降级内容：当浏览器不支持video标签时显示 -->
您的浏览器不支持HTML5视频播放。
</video>
2.2 核心属性说明
| 属性名 | 取值范围 | 描述 | 兼容性注意事项 |
|---|---|---|---|
src |
视频文件URL | 指定视频源文件路径 | 必须指定，支持相对路径和绝对路径 |
controls |
无值（存在即生效） | 显示浏览器原生播放控件（播放/暂停、音量、进度条等） | 所有现代浏览器支持 |
autoplay |
无值（存在即生效） | 页面加载后自动播放视频 | 多数浏览器要求配合muted属性才能自动播放 |
muted |
无值（存在即生效） | 默认静音播放 | 与autoplay配合使用可提高自动播放成功率 |
loop |
无值（存在即生效） | 视频播放完毕后自动循环播放 | - |
poster |
图片URL | 视频加载前显示的封面图 | 建议尺寸与视频分辨率一致 |
width/height |
像素值（如640）或百分比 |
设置视频播放器的宽度/高度 | 若只设置一个维度，视频将按比例缩放 |
preload |
auto/metadata/none |
预加载策略：auto（自动预加载）、metadata（仅预加载元数据）、none（不预加载） |
移动端建议使用metadata优化加载速度 |
2.3 多格式兼容语法
为确保不同浏览器支持，可通过<source>标签提供多种视频格式：
<video controls width="800" poster="video-cover.jpg">
<source src="video.mp4" type="video/mp4"> <!-- MP4格式：主流浏览器支持 -->
<source src="video.webm" type="video/webm"> <!-- WebM格式：开源格式，Firefox/Chrome支持 -->
<source src="video.ogg" type="video/ogg"> <!-- Ogg格式：旧版浏览器支持 -->
您的浏览器不支持HTML5视频播放。
</video>
三、实战示例
3.1 基础视频播放器（带控件和封面）
<!-- 基础示例：带控件、封面和尺寸设置 -->
<video
controls
width="800"
height="450"
poster="https://example.com/cover.jpg"
>
<source src="https://example.com/video.mp4" type="video/mp4">
您的浏览器不支持HTML5视频。
</video>
效果说明：页面显示800×450像素的视频播放器，加载时显示封面图，提供播放/暂停、音量、全屏等控件，支持MP4格式视频。
3.2 自动播放静音视频（适合背景视频）
<!-- 背景视频：自动播放+静音+无控件 -->
<video
autoplay
muted
loop
playsinline <!-- 解决iOS Safari自动播放限制 -->
style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"
>
<source src="background.mp4" type="video/mp4">
</video>
关键属性：
autoplay+muted：满足多数浏览器自动播放策略（静音视频可自动播放）；loop：循环播放；playsinline：iOS Safari要求此属性才能在页面内播放（而非全屏）；object-fit: cover：视频铺满容器，保持比例不拉伸。
3.3 自定义控制栏（JavaScript增强）
<!-- 自定义控制栏示例 -->
<div class="video-container">
<video id="myVideo" width="800" poster="cover.jpg">
<source src="video.mp4" type="video/mp4">
</video>
<!-- 自定义控制按钮 -->
<div class="controls">
<button onclick="document.getElementById('myVideo').play()">播放</button>
<button onclick="document.getElementById('myVideo').pause()">暂停</button>
<button onclick="document.getElementById('myVideo').volume=0.5">音量50%</button>
<span id="time">0:00 / 0:00</span>
</div>
</div>
<style>
.controls { margin-top: 10px; }
button { margin-right: 5px; padding: 5px 10px; }
</style>
<script>
// 实时更新播放时间
const video = document.getElementById('myVideo');
video.ontimeupdate = function() {
const currentTime = formatTime(video.currentTime);
const duration = formatTime(video.duration);
document.getElementById('time').textContent = `${currentTime} / ${duration}`;
};
// 时间格式化函数（秒→分:秒）
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs < 10 ? '0' + secs : secs}`;
}
</script>
功能说明：通过JavaScript实现自定义播放/暂停按钮、音量控制和播放时间显示，突破原生控件样式限制。
四、注意事项
4.1 浏览器兼容性
- 格式支持：MP4（H.264编码）支持所有现代浏览器；WebM适合Firefox/Chrome；Ogg仅建议作为降级方案。
- 自动播放限制：Chrome 66+、Safari 11+要求视频必须静音（
muted）才能自动播放；iOS Safari需添加playsinline属性。 - 旧浏览器支持：IE8及以下不支持
<video>标签，需提供Flash降级方案或文本提示。
4.2 性能优化
- 视频压缩：推荐使用H.265编码（MP4格式），比H.264节省50%带宽；
- 自适应码率：通过HLS（HTTP Live Streaming）提供不同清晰度视频（需配合
m3u8格式）； - 延迟加载：对非首屏视频使用
loading="lazy"属性（Chrome 77+支持）：<video controls loading="lazy" src="video.mp4"></video>
4.3 常见问题解决
- 视频黑屏无声音：检查视频路径是否正确、格式是否受支持；
- 自动播放失效：确保添加
muted属性，或通过用户交互（如点击事件）触发播放； - 封面图不显示：检查
poster路径是否正确，或视频文件是否已损坏。
五、自测题
以下哪个属性用于设置视频播放完毕后自动循环？
A.repeatB.loopC.cycle如何让视频在页面加载后自动播放且静音？
A.<video autoplay muted>B.<video auto muted>C.<video play="auto" sound="off">为确保所有现代浏览器支持视频播放，应优先提供哪种格式？
A. Ogg B. WebM C. MP4
答案：1.B 2.A 3.C
评论