一、基础语法与核心属性

1.1 基础语法结构

<video>标签是HTML5中用于嵌入视频的核心元素，其基础语法需包含src属性指定视频源，并通过controls属性启用浏览器默认播放控件。以下是一个完整的视频嵌入示例：

<video 
  src="demo.mp4" 
  controls 
  width="800" 
  height="450"
  poster="preview.jpg">
  您的浏览器不支持HTML5视频，请升级至最新版本。
</video>

关键属性说明：

controls：显示播放/暂停、进度条、音量等默认控件
poster：指定视频加载前显示的封面图
width/height：设置视频显示尺寸（单位：像素）
降级提示文本：当浏览器不支持<video>标签时显示

1.2 多格式兼容方案

不同浏览器对视频编码格式的支持存在差异，主流兼容方案需同时提供MP4（H.264编码）和WebM（VP9编码）两种格式：

<video controls poster="cover.jpg">
  <!-- 浏览器按顺序尝试加载支持的格式 -->
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <!-- 终极降级方案 -->
  <a href="video.mp4">下载视频观看</a>
</video>

格式选择建议：

MP4（H.264）：兼容所有现代浏览器，包括移动端
WebM（VP9）：同等画质下体积减少30%，但IE/Safari不支持
AV1：新兴开源格式，压缩率更高但硬件加速支持有限

二、JavaScript API深度控制

2.1 核心方法与属性

通过DOM操作获取视频元素后，可调用以下关键API：

const video = document.querySelector('video');
// 可读写属性
video.currentTime = 30;    // 跳转到30秒
video.volume = 0.7;        // 设置音量为70%
video.playbackRate = 1.5;  // 1.5倍速播放
video.muted = true;         // 静音模式
// 只读属性
console.log(video.duration);      // 视频总时长（秒）
console.log(video.paused);        // 是否处于暂停状态
console.log(video.ended);         // 是否播放结束

2.2 播放控制实战

2.2.1 播放/暂停切换

需处理浏览器自动播放策略限制（Chrome要求静音或用户交互后才能自动播放）：

document.getElementById('toggleBtn').addEventListener('click', async () => {
  try {
    if (video.paused) {
      await video.play(); // 返回Promise，需处理异常
    } else {
      video.pause();
    }
  } catch (err) {
    console.warn('自动播放失败:', err);
    video.muted = true;
    video.play(); // 静音后重试
  }
});

2.2.2 进度条同步

通过timeupdate事件实现自定义进度条：

video.addEventListener('timeupdate', () => {
  const progress = (video.currentTime / video.duration) * 100;
  document.querySelector('.progress-bar').style.width = `${progress}%`;
});
// 进度条点击跳转
document.querySelector('.progress-container').addEventListener('click', (e) => {
  const rect = e.target.getBoundingClientRect();
  const pos = (e.clientX - rect.left) / rect.width;
  video.currentTime = pos * video.duration;
});

2.3 格式兼容性检测

使用canPlayType()方法检测浏览器支持情况：

function checkFormatSupport() {
  const formats = [
    { type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"', name: 'MP4' },
    { type: 'video/webm; codecs="vp9, vorbis"', name: 'WebM' }
  ];
  formats.forEach(fmt => {
    const support = video.canPlayType(fmt.type);
    console.log(`${fmt.name}支持度: ${
      support === 'probably' ? '完全支持' : 
      support === 'maybe' ? '可能支持' : '不支持'
    }`);
  });
}

三、高级应用场景

3.1 全屏播放控制

通过Fullscreen API实现全屏切换：

document.getElementById('fullscreenBtn').addEventListener('click', () => {
  if (!document.fullscreenElement) {
    video.requestFullscreen().catch(err => {
      console.error('全屏失败:', err);
    });
  } else {
    document.exitFullscreen();
  }
});

3.2 画中画模式（PiP）

现代浏览器支持的画中画功能实现：

async function togglePictureInPicture() {
  try {
    if (document.pictureInPictureElement) {
      await document.exitPictureInPicture();
    } else {
      await video.requestPictureInPicture();
    }
  } catch (err) {
    console.error('PiP错误:', err);
  }
}

3.3 视频事件监听

关键事件处理示例：

// 播放结束时重置
video.addEventListener('ended', () => {
  video.currentTime = 0;
});
// 缓冲进度监控
video.addEventListener('progress', () => {
  const buffered = video.buffered;
  if (buffered.length > 0) {
    const loaded = (buffered.end(0) / video.duration) * 100;
    console.log(`已缓冲: ${loaded.toFixed(1)}%`);
  }
});

四、性能优化建议

预加载策略：
- 使用preload="metadata"仅加载元数据
- 避免在移动端使用preload="auto"
自适应码率：
- 通过<source>提供不同分辨率版本
- 结合navigator.connection.effectiveType检测网络状况
缓存策略：
- 设置合理的Cache-Control头
- 使用Service Worker缓存视频文件
解码性能：
- 避免在低端设备上使用4K视频
- 测试willReadFrequently属性对Canvas处理的影响

五、常见问题解决方案

5.1 移动端兼容问题

iOS自动播放限制：必须通过用户交互触发播放
Android视频层级：添加playsinline属性防止全屏
横竖屏适配：监听orientationchange事件调整布局

5.2 跨浏览器差异

问题场景	Chrome/Firefox	Safari	Edge
AV1格式支持	✓	✗	✓
PiP API	✓	✓	✓
MediaSession API	✓	✗	✓

5.3 错误处理机制

video.addEventListener('error', () => {
  switch(video.error.code) {
    case MediaError.MEDIA_ERR_ABORTED:
      console.error('用户终止加载');
      break;
    case MediaError.MEDIA_ERR_NETWORK:
      console.error('网络错误');
      break;
    case MediaError.MEDIA_ERR_DECODE:
      console.error('解码失败');
      break;
    default:
      console.error('未知错误');
  }
});

本文通过系统化的技术解析，覆盖了从基础实现到高级优化的全链路知识。开发者可根据实际场景选择合适方案，建议结合浏览器开发者工具的Media面板进行调试，并通过Lighthouse进行性能评估。对于大规模视频应用，可考虑集成专业媒体服务器或CDN加速服务。

HTML5视频技术全解析：从基础实现到全场景兼容方案