第一章：HTML video 元素基础

<video
  src="https://example.com/video.mp4"
  controls
  width="800"
  height="450"
  poster="https://example.com/cover.jpg"
  preload="metadata"
>
  您的浏览器不支持 video 标签
</video>

<!-- 这样写有格式兼容风险 -->
<video src="video.webm" controls></video>

<video controls width="800" height="450">
  <!-- 优先 WebM/VP9，压缩率更高，Chrome/Firefox 优先支持 -->
  <source src="video.webm" type="video/webm; codecs='vp9, opus'" />
  <!-- 兜底 MP4/H.264，兼容性最广 -->
  <source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" />
  <!-- 最终降级文案 -->
  <p>您的浏览器不支持 HTML5 视频，请 <a href="video.mp4">下载视频</a></p>
</video>

<video controls src="video.mp4">
  <!-- default 表示默认启用这条字幕 -->
  <track
    default
    kind="subtitles"
    src="subtitles_zh.vtt"
    srclang="zh"
    label="中文"
  />
  <track
    kind="subtitles"
    src="subtitles_en.vtt"
    srclang="en"
    label="English"
  />
  <!-- 章节标记，可用于实现视频章节导航 -->
  <track kind="chapters" src="chapters.vtt" srclang="zh" />
</video>

<video
  src="video.mp4"
  controls
  poster="https://example.com/cover.jpg"
></video>

video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover; /* 或 contain，根据需求选择 */
}

function getVideoPoster(videoSrc) {
  return new Promise((resolve) => {
    const video = document.createElement('video');
    video.crossOrigin = 'anonymous'; // 跨域视频必须设置
    video.src = videoSrc;
    video.currentTime = 1; // 跳到第1秒，避免第0帧是黑屏
 
    video.addEventListener('seeked', () => {
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext('2d').drawImage(video, 0, 0);
      resolve(canvas.toDataURL('image/jpeg', 0.8));
    });
  });
}

<!-- 元素宽800px，但视频编码可能是1920x1080 -->
<video src="video.mp4" width="800" height="450" controls></video>

.video-container {
  width: 100%;
  max-width: 1200px;
}
 
.video-container video {
  width: 100%;
  height: auto; /* 保持宽高比 */
  display: block; /* 消除底部 inline 间距 */
}

<video
  controls
  controlslist="nodownload nofullscreen noremoteplayback"
  src="video.mp4"
></video>

const video = document.querySelector('video');
 
// 先静音自动播放，等用户交互后解除静音
video.muted = true;
const playPromise = video.play();
 
if (playPromise !== undefined) {
  playPromise
    .then(() => {
      // 自动播放成功，可以展示"点击开启声音"的提示
      console.log('自动播放成功');
    })
    .catch(error => {
      // 自动播放被阻止，展示播放按钮让用户手动触发
      console.log('自动播放被阻止，需要用户交互', error);
      showPlayButton();
    });
}

<!-- 这是目前唯一稳定的自动播放写法 -->
<video src="video.mp4" autoplay muted loop playsinline></video>

<!-- 列表页：不预加载，用 IntersectionObserver 控制 -->
<video preload="none" data-src="video.mp4" poster="cover.jpg"></video>
 
<!-- 详情页：预加载元数据，平衡速度与流量 -->
<video preload="metadata" src="video.mp4" controls></video>

<video
  src="video.mp4"
  controls
  playsinline
  webkit-playsinline
  x5-playsinline="true"
  x5-video-player-type="h5-page"
></video>

<video
  src="https://cdn.example.com/video.mp4"
  crossorigin="anonymous"
  controls
></video>

<video
  class="video-player"
  poster="https://cdn.example.com/cover.jpg"
  preload="metadata"
  crossorigin="anonymous"
  playsinline
  webkit-playsinline
  x5-playsinline="true"
  x5-video-player-type="h5-page"
  controlslist="nodownload"
>
  <source
    src="https://cdn.example.com/video.webm"
    type="video/webm; codecs='vp9, opus'"
  />
  <source
    src="https://cdn.example.com/video.mp4"
    type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"
  />
  <track
    default
    kind="subtitles"
    src="https://cdn.example.com/subtitles_zh.vtt"
    srclang="zh"
    label="中文"
  />
  <p>您的浏览器不支持 HTML5 视频</p>
</video>

.video-player {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: contain;
  background-color: #000;
}