HTML视频元素[编辑 | 编辑源代码]

HTML视频元素（<video>）是HTML5引入的核心多媒体标签之一，用于在网页中嵌入视频内容，无需依赖Flash等第三方插件。本节将详细介绍其语法、属性、事件及实际应用。

基本语法[编辑 | 编辑源代码]

视频元素的基本结构如下：

<video src="example.mp4" controls>
  您的浏览器不支持HTML5视频
</video>

src：指定视频文件路径
controls：显示默认播放控件
标签内文字为降级内容，当浏览器不支持时显示

核心属性[编辑 | 编辑源代码]

属性	描述	示例
`autoplay`	视频自动播放（注意浏览器限制）	`autoplay`
`loop`	循环播放	`loop`
`muted`	静音状态	`muted`
`poster`	视频封面图URL	`poster="preview.jpg"`
`preload`	预加载策略（auto/metadata/none）	`preload="metadata"`

多源格式支持[编辑 | 编辑源代码]

为兼容不同浏览器，应提供多种视频格式：

<video controls width="640">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持HTML5视频
</video>

浏览器会按顺序尝试加载第一个支持的格式。

响应式视频设计[编辑 | 编辑源代码]

通过CSS实现自适应宽度：

<style>
  .responsive-video {
    max-width: 100%;
    height: auto;
  }
</style>

<video class="responsive-video" controls>
  <source src="demo.mp4" type="video/mp4">
</video>

JavaScript控制[编辑 | 编辑源代码]

视频元素可通过JavaScript API进行深度控制：

const myVideo = document.getElementById("myVideo");

// 播放/暂停切换
function togglePlay() {
  if (myVideo.paused) myVideo.play();
  else myVideo.pause();
}

// 跳转到10秒
myVideo.currentTime = 10;

常用属性和方法：

play(), pause()
currentTime, duration
volume（0.0-1.0）
playbackRate（1.0为正常速度）

事件处理[编辑 | 编辑源代码]

重要视频事件示例：

myVideo.addEventListener("loadedmetadata", () => {
  console.log("视频元数据已加载，时长：" + myVideo.duration);
});

myVideo.addEventListener("ended", () => {
  alert("播放结束");
});

高级应用案例[编辑 | 编辑源代码]

自定义播放器[编辑 | 编辑源代码]

完整示例创建自定义控件：

<div class="video-player">
  <video id="customVideo" src="video.mp4"></video>
  <div class="controls">
    <button onclick="togglePlay()">▶️</button>
    <input type="range" id="progress" value="0">
    <button onclick="toggleMute()">🔊</button>
  </div>
</div>

<script>
  const video = document.getElementById("customVideo");
  const progress = document.getElementById("progress");

  video.addEventListener("timeupdate", () => {
    progress.value = (video.currentTime / video.duration) * 100;
  });

  progress.addEventListener("input", () => {
    video.currentTime = (progress.value / 100) * video.duration;
  });
</script>

画中画模式[编辑 | 编辑源代码]

现代浏览器支持画中画API：

// 请求画中画模式
document.getElementById("pipBtn").addEventListener("click", async () => {
  try {
    if (video !== document.pictureInPictureElement) {
      await video.requestPictureInPicture();
    } else {
      await document.exitPictureInPicture();
    }
  } catch (error) {
    console.error("画中画错误:", error);
  }
});

性能优化[编辑 | 编辑源代码]

1. 使用preload="metadata"减少初始加载量 2. 为移动设备添加playsinline属性 3. 考虑使用<iframe>嵌入第三方视频（如YouTube）以节省带宽

浏览器兼容性[编辑 | 编辑源代码]

使用以下mermaid图表展示主要浏览器支持情况：

数学表示[编辑 | 编辑源代码]

视频缓冲进度可表示为： $b u f f e r e d = \frac{\sum_{i = 0}^{n - 1} (b u f f e r e d E n d_{i} - b u f f e r e d S t a r t_{i})}{d u r a t i o n}$

其中 $b u f f e r e d S t a r t_{i}$ 和 $b u f f e r e d E n d_{i}$ 表示第i个缓冲区间。

最佳实践总结[编辑 | 编辑源代码]

始终提供多种视频格式
为无障碍访问添加track字幕
移动端考虑自动播放限制
重要视频提供备用下载链接
使用poster属性提升用户体验