'<video>'标签的使用与属性

<video>标签的基本概念

<video>是HTML5新增的用于在网页中嵌入视频内容的元素，它允许开发者在不需要第三方插件的情况下直接播放视频。与传统的Flash等技术相比，<video>标签具有更好的性能、更低的资源消耗以及更高的兼容性。

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

这个最简单的例子展示了如何用<video>标签嵌入一个视频文件。现代浏览器会自动为视频提供基本的控制界面，包括播放/暂停按钮、进度条和音量控制等。

核心属性详解

src属性

src属性指定要播放的视频文件URL，可以是相对路径或绝对路径。虽然这是最直接的指定视频源的方式，但在实际开发中更推荐使用<source>子元素。

<video src="assets/videos/intro.mp4"></video>

controls属性

controls是一个布尔属性，添加后浏览器会显示默认的视频控制界面。如果不设置这个属性，视频将不会显示任何控制按钮，需要通过JavaScript来控制播放。

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

autoplay属性

autoplay属性使视频在就绪后自动开始播放。但需要注意，大多数现代浏览器会阻止带有声音的自动播放，除非视频被静音或用户已经与网站有过交互。

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

loop属性

loop属性使视频播放结束后自动重新开始，适用于背景视频或循环播放的内容。

<video src="background-loop.mp4" loop muted autoplay></video>

muted属性

muted属性设置视频默认静音，这在自动播放场景中特别有用，因为大多数浏览器允许静音视频自动播放。

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

poster属性

poster属性指定视频下载时或用户点击播放前显示的图像。如果不设置，浏览器通常会显示视频的第一帧作为预览图。

<video src="tutorial.mp4" poster="preview.jpg" controls></video>

preload属性

preload属性告诉浏览器应该如何加载视频资源，有三个可能的值：

• auto：浏览器应该加载整个视频
• metadata：只加载视频的元数据（如时长、尺寸等）
• none：不预加载视频

<video src="long-video.mp4" preload="metadata"></video>

width和height属性

这两个属性设置视频显示区域的宽度和高度，单位是像素。如果不设置，视频区域会根据视频的原始尺寸自动调整。

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

多源文件与格式兼容

由于不同浏览器支持的视频格式不同，通常需要提供多种格式的视频源。这时可以使用<source>元素代替src属性，浏览器会按顺序尝试加载第一个支持的格式。

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

type属性帮助浏览器判断是否能播放该格式，避免下载不支持的格式。常见的视频MIME类型包括：

• video/mp4：MP4格式（H.264编码）
• video/webm：WebM格式（VP8/VP9编码）
• video/ogg：Ogg格式（Theora编码）

响应式视频设计

要使视频在不同屏幕尺寸上都能良好显示，可以使用CSS实现响应式设计。最常见的方法是设置max-width: 100%和height: auto。

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

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

对于保持特定宽高比的响应式视频，可以使用padding技巧：

<style>
  .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 宽高比 */
    height: 0;
    overflow: hidden;
  }
  
  .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

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

JavaScript控制API

<video>元素提供了丰富的JavaScript API，允许开发者创建自定义的视频控制界面或实现特殊功能。

基本控制方法

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

// 播放视频
myVideo.play();

// 暂停视频
myVideo.pause();

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

// 跳转到特定时间点（单位：秒）
myVideo.currentTime = 30; // 跳转到30秒处

// 调整音量（0.0到1.0）
myVideo.volume = 0.5; // 设置为50%音量

// 静音/取消静音
myVideo.muted = true; // 静音

常用属性

// 视频时长（秒）
const duration = myVideo.duration;

// 当前播放位置（秒）
const currentTime = myVideo.currentTime;

// 播放状态
const isPaused = myVideo.paused;
const isEnded = myVideo.ended;

// 音量相关
const volumeLevel = myVideo.volume;
const isMuted = myVideo.muted;

// 视频尺寸
const videoWidth = myVideo.videoWidth;
const videoHeight = myVideo.videoHeight;

重要事件

myVideo.addEventListener("play", function() {
  console.log("视频开始播放");
});

myVideo.addEventListener("pause", function() {
  console.log("视频已暂停");
});

myVideo.addEventListener("ended", function() {
  console.log("视频播放结束");
});

myVideo.addEventListener("timeupdate", function() {
  console.log("当前播放位置：" + myVideo.currentTime);
  // 可以在这里更新自定义进度条
});

myVideo.addEventListener("volumechange", function() {
  console.log("音量变化：" + myVideo.volume);
});

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

myVideo.addEventListener("error", function() {
  console.error("视频加载错误");
});

高级功能与技巧

自定义控制界面

通过隐藏默认控制界面(controls属性)并使用JavaScript API，可以创建完全自定义的视频播放器。

<video id="customVideo">
  <source src="movie.mp4" type="video/mp4">
</video>

<div class="custom-controls">
  <button id="playBtn">播放</button>
  <input type="range" id="progressBar" min="0" max="100" value="0">
  <button id="muteBtn">静音</button>
  <input type="range" id="volumeSlider" min="0" max="100" value="100">
</div>

<script>
  const video = document.getElementById("customVideo");
  const playBtn = document.getElementById("playBtn");
  const progressBar = document.getElementById("progressBar");
  const muteBtn = document.getElementById("muteBtn");
  const volumeSlider = document.getElementById("volumeSlider");

  playBtn.addEventListener("click", function() {
    if (video.paused) {
      video.play();
      playBtn.textContent = "暂停";
    } else {
      video.pause();
      playBtn.textContent = "播放";
    }
  });

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

  progressBar.addEventListener("input", function() {
    const seekTime = (progressBar.value / 100) * video.duration;
    video.currentTime = seekTime;
  });

  muteBtn.addEventListener("click", function() {
    video.muted = !video.muted;
    muteBtn.textContent = video.muted ? "取消静音" : "静音";
  });

  volumeSlider.addEventListener("input", function() {
    video.volume = volumeSlider.value / 100;
  });
</script>

画中画模式

现代浏览器支持视频画中画(Picture-in-Picture)模式，允许视频浮动在其他窗口上方播放。

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

pipButton.addEventListener("click", async function() {
  try {
    if (video !== document.pictureInPictureElement) {
      await video.requestPictureInPicture();
    } else {
      await document.exitPictureInPicture();
    }
  } catch (error) {
    console.error("画中画错误:", error);
  }
});

video.addEventListener("enterpictureinpicture", function() {
  console.log("进入画中画模式");
});

video.addEventListener("leavepictureinpicture", function() {
  console.log("退出画中画模式");
});

字幕与轨道

<video>支持通过<track>元素添加字幕或章节信息。

<video controls>
  <source src="movie.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字幕文件示例(subtitles_en.vtt)：

WEBVTT

1
00:00:01.000 --> 00:00:04.000
Hello, welcome to this video tutorial.

2
00:00:05.000 --> 00:00:08.000
Today we'll learn about HTML5 video element.

媒体片段

可以通过在URL中添加媒体片段标识符来播放视频的特定部分。

<video controls>
  <source src="movie.mp4#t=10,20" type="video/mp4">
</video>
<!-- 播放从10秒到20秒的部分 -->

<video controls>
  <source src="movie.mp4#t=30" type="video/mp4">
</video>
<!-- 从30秒开始播放 -->

性能优化与最佳实践

延迟加载

对于页面下方的视频，可以使用loading="lazy"属性延迟加载，提高页面初始加载速度。

<video controls loading="lazy" poster="preview.jpg">
  <source src="long-video.mp4" type="video/mp4">
</video>

预加载关键帧

对于长视频，可以预加载关键帧(metadata)而不是整个视频，减少初始带宽使用。

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

自适应比特率流

对于高质量视频内容，考虑使用自适应比特率流媒体(如HLS或DASH)而不是单一视频文件。

<!-- 使用hls.js库播放HLS流 -->
<video id="hlsVideo" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  if (Hls.isSupported()) {
    const video = document.getElementById("hlsVideo");
    const hls = new Hls();
    hls.loadSource("stream.m3u8");
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
      video.play();
    });
  }
</script>

视频格式选择

根据目标受众选择最佳视频格式组合：

• 现代浏览器：优先使用WebM(VP9) + MP4(H.264)组合
• 兼容旧设备：MP4(H.264) + Ogg(Theora)
• 高质量需求：考虑AV1编码(浏览器支持度正在提高)

<video controls>
  <source src="movie.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
  <source src="movie.vp9.webm" type="video/webm; codecs=vp9">
  <source src="movie.h264.mp4" type="video/mp4">
  您的浏览器不支持HTML5视频
</video>

无障碍访问

确保视频内容对所有用户都可访问：

提供字幕和文字稿

<video controls>
  <source src="lecture.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文字幕" default>
  <track src="description.vtt" kind="descriptions" srclang="zh">
</video>

<div id="transcript">
  <h3>视频文字稿</h3>
  <p>这里是视频的完整文字内容...</p>
</div>

键盘可操作

确保自定义视频控件可以通过键盘操作：

// 为自定义控件添加键盘事件
playBtn.addEventListener("keydown", function(e) {
  if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    togglePlay();
  }
});

progressBar.addEventListener("keydown", function(e) {
  if (e.key === "ArrowLeft") {
    video.currentTime = Math.max(0, video.currentTime - 5);
  } else if (e.key === "ArrowRight") {
    video.currentTime = Math.min(video.duration, video.currentTime + 5);
  }
});

ARIA属性

为自定义播放器添加适当的ARIA属性：

<div class="custom-player" role="application" aria-label="视频播放器">
  <video id="videoPlayer" aria-labelledby="videoTitle"></video>
  <h2 id="videoTitle">HTML5视频教程</h2>
  <div class="controls">
    <button id="playButton" aria-label="播放/暂停"></button>
    <div id="progress" role="slider" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

跨浏览器兼容性处理

虽然现代浏览器对<video>的支持已经很好，但仍有一些差异需要注意：

检测格式支持

function canPlayType(type) {
  const video = document.createElement("video");
  return !!video.canPlayType(type);
}

const supportsMP4 = canPlayType("video/mp4");
const supportsWebM = canPlayType("video/webm");
const supportsOgg = canPlayType("video/ogg");

console.log(`MP4支持: ${supportsMP4}`);
console.log(`WebM支持: ${supportsWebM}`);
console.log(`Ogg支持: ${supportsOgg}`);

回退方案

对于完全不支持HTML5视频的旧浏览器(如IE8及以下)，可以提供Flash回退或直接下载链接。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <!-- Flash回退 -->
  <object type="application/x-shockwave-flash" data="player.swf">
    <param name="movie" value="player.swf">
    <param name="flashvars" value="video=movie.mp4">
    <!-- 最终回退：下载链接 -->
    <a href="movie.mp4">下载视频</a>
  </object>
</video>

浏览器特定处理

某些浏览器可能需要特殊处理，例如iOS上的内联播放限制：

// 检测iOS设备
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (isIOS) {
  // iOS需要用户交互才能播放视频
  document.addEventListener("click", function firstPlay() {
    video.play().catch(e => console.error(e));
    document.removeEventListener("click", firstPlay);
  }, { once: true });
}

安全与隐私考虑

跨域限制

如果视频资源来自不同域，可能需要设置CORS头部：

<video controls crossorigin="anonymous">
  <source src="https://another-domain.com/video.mp4" type="video/mp4">
</video>

服务器需要设置响应头：

Access-Control-Allow-Origin: *

防止热链接

保护视频不被其他网站直接链接使用：

// 检查document.referrer是否来自允许的域名
if (document.referrer && !document.referrer.includes("yourdomain.com")) {
  video.src = "blocked.mp4"; // 显示一个"禁止热链接"的视频
}

加密媒体扩展(EME)

对于需要DRM保护的视频内容，可以使用Encrypted Media Extensions：

const video = document.querySelector("video");
const config = [{
  initDataTypes: ["cenc"],
  videoCapabilities: [{
    contentType: 'video/mp4;codecs="avc1.42E01E"'
  }]
}];

navigator.requestMediaKeySystemAccess("com.widevine.alpha", config)
  .then(function(keySystemAccess) {
    return keySystemAccess.createMediaKeys();
  })
  .then(function(mediaKeys) {
    video.setMediaKeys(mediaKeys);
    video.src = "protected-video.mp4";
  });

实际应用案例

视频背景

创建全屏视频背景效果：

<style>
  .video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
  }
</style>

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

视频画廊

创建带有预览功能的视频画廊：

<div class="video-gallery">
  <div class="video-thumbnail" data-video="video1.mp4">
    <img src="video1-thumb.jpg" alt="视频1">
    <div class="play-icon">▶</div