<video>-视频内容

<video> 标签是 HTML5 中用于嵌入视频内容的核心元素，支持多种格式和交互控制。通过它可以直接在网页中播放视频，无需依赖第三方插件。

<video> 标签的基本语法

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

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

• src 属性指定视频文件的路径。
• controls 属性显示默认的视频控制条（播放/暂停、音量、全屏等）。
• 标签内的文本是后备内容，当浏览器不支持 <video> 时显示。

支持的视频格式

不同浏览器支持的视频格式可能不同，常见的格式包括：

• MP4 (H.264)：广泛兼容，推荐使用。
• WebM：开源格式，适合现代浏览器。
• Ogg：较少使用，兼容性较差。

为了提高兼容性，可以使用 <source> 标签指定多个格式：

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

常用属性

<video> 标签支持多种属性来控制视频的播放和行为：

• autoplay：视频加载后自动播放（部分浏览器可能限制）。
• loop：视频播放完成后循环。
• muted：默认静音。
• poster：指定视频封面图。
• width 和 height：设置视频显示尺寸。

示例：

<video src="video.mp4" controls autoplay loop muted poster="poster.jpg" width="640" height="360">
</video>

通过 JavaScript 控制视频

<video> 元素提供了丰富的 API，允许通过 JavaScript 动态控制播放。例如：

<video id="myVideo" src="video.mp4" width="640" height="360"></video>
<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>

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

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }
</script>

事件监听

可以通过事件监听来响应视频状态的变化，例如：

<video id="myVideo" src="video.mp4" controls></video>
<p id="status">视频未开始</p>

<script>
  const video = document.getElementById("myVideo");
  const statusText = document.getElementById("status");

  video.addEventListener("play", () => {
    statusText.textContent = "视频正在播放";
  });

  video.addEventListener("pause", () => {
    statusText.textContent = "视频已暂停";
  });

  video.addEventListener("ended", () => {
    statusText.textContent = "视频播放结束";
  });
</script>

自定义视频控件

如果默认的控制条不符合需求，可以完全自定义 UI：

<video id="customVideo" src="video.mp4" width="640" height="360"></video>
<div>
  <button onclick="togglePlay()">播放/暂停</button>
  <input type="range" id="volume" min="0" max="1" step="0.1" value="1" onchange="setVolume()">
</div>

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

  function togglePlay() {
    if (video.paused) {
      video.play();
    } else {
      video.pause();
    }
  }

  function setVolume() {
    video.volume = volumeControl.value;
  }
</script>

响应式视频

为了让视频适应不同屏幕尺寸，可以使用 CSS：

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

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

跨浏览器兼容性

虽然现代浏览器普遍支持 <video>，但在旧版浏览器（如 IE9 及以下）可能需要回退方案：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <!-- 使用 Flash 或其他备用方案 -->
  <object data="flash-player.swf" type="application/x-shockwave-flash">
    <param name="movie" value="flash-player.swf">
  </object>
</video>

性能优化

大型视频文件可能影响加载速度，可以采用以下优化方式：

• 使用 preload 属性控制预加载行为：
  • auto：浏览器自动加载视频（默认）。
  • metadata：仅加载元数据（如时长）。
  • none：不预加载。

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

• 使用 <source> 的 media 属性，根据设备条件加载不同视频：

<video controls>
  <source src="video-small.mp4" media="(max-width: 600px)">
  <source src="video-large.mp4" media="(min-width: 601px)">
</video>

高级功能：画中画模式

现代浏览器支持画中画（PiP）模式，允许视频浮动在其他窗口上方：

<video id="pipVideo" src="video.mp4" controls></video>
<button onclick="togglePip()">切换画中画</button>

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

  async function togglePip() {
    if (document.pictureInPictureElement) {
      await document.exitPictureInPicture();
    } else {
      await video.requestPictureInPicture();
    }
  }
</script>

视频字幕与轨道

<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>

字幕文件（如 subtitles-en.vtt）格式示例：

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello, world!

00:00:05.000 --> 00:00:08.000
This is a subtitle example.

视频与 Canvas 结合

可以通过 Canvas 动态处理视频帧：

<video id="sourceVideo" src="video.mp4" style="display:none"></video>
<canvas id="outputCanvas" width="640" height="360"></canvas>
<button onclick="startProcessing()">处理视频</button>

<script>
  const video = document.getElementById("sourceVideo");
  const canvas = document.getElementById("outputCanvas");
  const ctx = canvas.getContext("2d");

  function startProcessing() {
    video.play();
    processFrame();
  }

  function processFrame() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    // 示例：转换为灰度
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
      data[i] = avg;     // R
      data[i + 1] = avg; // G
      data[i + 2] = avg; // B
    }
    ctx.putImageData(imageData, 0, 0);
    requestAnimationFrame(processFrame);
  }
</script>