<video>-视频内容

<video> 标签是 HTML5 中用于嵌入视频内容的原生元素，支持多种格式的视频文件，无需依赖第三方插件。通过属性控制播放行为、尺寸和源文件，开发者可以轻松实现视频播放功能。

<video> 标签的基本语法

<video> 标签的基本结构如下：

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

• src 属性指定视频文件的路径。
• controls 属性显示浏览器默认的播放控件（如播放/暂停按钮、进度条等）。

如果需要对不同浏览器兼容性做适配，可以使用 <source> 子标签指定多个视频源：

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持 HTML5 视频标签。
</video>

当浏览器不支持 <video> 标签时，会显示标签内的备用内容（如上述的提示文本）。

核心属性详解

controls

启用浏览器默认的播放控件：

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

autoplay

视频加载后自动播放（部分浏览器可能因策略限制不生效）：

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

loop

视频播放结束后自动循环：

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

muted

默认静音播放（常与 autoplay 配合使用）：

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

poster

设置视频封面图（未播放时显示的图像）：

<video src="video.mp4" poster="cover.jpg"></video>

width 和 height

设置视频显示尺寸（单位：像素）：

<video src="video.mp4" width="640" height="360"></video>

高级功能与事件控制

通过 JavaScript 操作视频

通过 DOM API 可以动态控制视频行为：

<video id="myVideo" src="video.mp4"></video>
<button onclick="document.getElementById('myVideo').play()">播放</button>
<button onclick="document.getElementById('myVideo').pause()">暂停</button>

监听视频事件

常用事件包括：

• play：视频开始播放时触发
• pause：视频暂停时触发
• ended：视频播放结束时触发

示例：

<video id="eventDemo" src="video.mp4" controls></video>
<script>
  const video = document.getElementById('eventDemo');
  video.addEventListener('ended', () => {
    alert('视频播放结束！');
  });
</script>

响应式视频设计

通过 CSS 实现视频自适应容器宽度：

<style>
  .responsive-video {
    width: 100%;
    height: auto;
  }
</style>
<video class="responsive-video" src="video.mp4" controls></video>

跨浏览器兼容性实践

不同浏览器对视频格式的支持差异较大，推荐使用以下组合：

• MP4（H.264 编码）：通用性最强
• WebM：更小的文件体积
• Ogg：旧版 Firefox 支持

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

性能优化技巧

预加载设置

通过 preload 属性控制视频加载策略：

<!-- 不预加载 -->
<video src="video.mp4" preload="none"></video>

<!-- 仅加载元数据（时长等） -->
<video src="video.mp4" preload="metadata"></video>

<!-- 自动预加载（浏览器决定） -->
<video src="video.mp4" preload="auto"></video>

延迟加载

配合 loading="lazy" 实现懒加载：

<video src="video.mp4" loading="lazy"></video>

隐藏式音频播放技巧

实现背景视频播放（无控件、自动循环）：

<video autoplay loop muted playsinline>
  <source src="background.mp4" type="video/mp4">
</video>

注意：移动端需添加 playsinline 属性避免全屏播放。

自定义播放器 UI

通过隐藏默认控件并自定义界面：

<video id="customPlayer" src="video.mp4"></video>
<div>
  <button onclick="document.getElementById('customPlayer').play()">▶</button>
  <button onclick="document.getElementById('customPlayer').pause()">⏸</button>
  <input type="range" id="volumeCtrl" min="0" max="1" step="0.1" value="1"
    onchange="document.getElementById('customPlayer').volume = this.value">
</div>

字幕与轨道文本

通过 <track> 标签添加字幕：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文" default>
</video>

字幕文件示例（WebVTT 格式）：

WEBVTT

00:00:01.000 --> 00:00:04.000
这是第一行字幕

00:00:05.000 --> 00:00:08.000
这是第二行字幕

移动端特殊处理

内联播放

避免 iOS 强制全屏播放：

<video playsinline webkit-playsinline></video>

防止自动播放

iOS 限制自动播放，需通过用户交互触发：

document.addEventListener('touchstart', () => {
  document.getElementById('myVideo').play();
}, { once: true });

视频格式转换指南

推荐工具：

• FFmpeg：命令行工具，支持所有格式转换
• HandBrake：图形界面工具

将视频转换为 MP4（H.264 编码）：

ffmpeg -i input.mov -c:v libx264 -preset slow -crf 22 -c:a aac -b:a 128k output.mp4

常见问题解决方案

视频无法播放

检查步骤：

1. 确认文件路径正确
2. 验证视频格式兼容性
3. 检查服务器 MIME 类型配置

自动播放失效

解决方案：

1. 添加 muted 属性
2. 确保视频尺寸较小（部分浏览器限制大视频自动播放）
3. 通过用户交互触发播放

全屏播放问题

禁止全屏：

video::-webkit-media-controls-fullscreen-button {
  display: none;
}