一、

HTML5标准引入的

<video controls width="800" height="450">
  <source src="demo.mp4" type="video/mp4">
  <source src="demo.webm" type="video/webm">
  <source src="demo.ogv" type="video/ogg">
  <p>您的浏览器不支持HTML5视频，请<a href="demo.mp4">下载视频</a>观看</p>
</video>

格式兼容策略：

MP4（H.264编码）：兼容性最佳，支持所有现代浏览器
WebM（VP9编码）：开源格式，Chrome/Firefox优先支持
Ogg（Theora编码）：早期开源标准，已逐渐被淘汰

建议同时提供MP4和WebM格式，通过<source>标签的顺序决定优先级。当浏览器不支持任何格式时，标签内文本将作为降级方案显示。

二、核心属性详解与最佳实践

1. 基础控制属性

<video controls autoplay muted loop poster="preview.jpg">
  <source src="trailer.mp4" type="video/mp4">
</video>

controls：必须显式声明才会显示播放控件
autoplay：现代浏览器要求必须配合muted属性才能生效
loop：适合背景音乐或循环动画场景
poster：建议使用与视频首帧相同的图片提升体验

2. 预加载策略

preload属性影响页面加载性能：

auto：预加载整个视频（慎用，可能消耗大量带宽）
metadata：仅加载时长、尺寸等元数据（推荐默认值）
none：不预加载任何数据

性能优化建议：

对长视频使用preload="metadata"
结合poster属性实现”假播放”效果
通过<link rel="preload">提前获取关键资源

3. 尺寸与响应式设计

/* 响应式视频容器 */
.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%;
}

通过CSS实现全宽响应式布局，保持视频原始宽高比防止变形。

三、JavaScript高级控制API

1. 基础控制方法

const video = document.getElementById('myVideo');
// 播放控制
function togglePlay() {
  if (video.paused) video.play();
  else video.pause();
}
// 进度跳转
function seekTo(seconds) {
  video.currentTime = Math.min(seconds, video.duration);
}
// 音量控制
function setVolume(level) {
  video.volume = Math.max(0, Math.min(1, level)); // 限制在0-1范围
}

2. 事件监听体系

// 常用事件列表
const events = [
  'play', 'pause', 'ended', 
  'timeupdate', 'progress', 
  'waiting', 'canplay', 
  'error'
];
events.forEach(event => {
  video.addEventListener(event, () => {
    console.log(`视频事件: ${event}`);
  });
});
// 自定义事件处理示例
video.addEventListener('timeupdate', () => {
  const progress = (video.currentTime / video.duration) * 100;
  document.querySelector('.progress-bar').style.width = `${progress}%`;
});

3. 完整控制面板实现

<div class="video-controls">
  <button onclick="video.play()">播放</button>
  <button onclick="video.pause()">暂停</button>
  <input 
    type="range" 
    min="0" 
    max="100" 
    value="0" 
    onchange="seekTo(video.duration * this.value / 100)">
  <span class="time-display">00:00 / 00:00</span>
</div>
<script>
const video = document.getElementById('myVideo');
const timeDisplay = document.querySelector('.time-display');
video.addEventListener('timeupdate', () => {
  const current = formatTime(video.currentTime);
  const duration = formatTime(video.duration);
  timeDisplay.textContent = `${current} / ${duration}`;
});
function formatTime(seconds) {
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
</script>

四、常见问题解决方案

1. 移动端自动播放限制

iOS Safari和Chrome要求：

视频必须静音（muted属性）
通过用户交互触发播放（如点击事件）

解决方案：

document.addEventListener('click', () => {
  const video = document.getElementById('introVideo');
  video.muted = true;
  video.play().catch(e => console.log('自动播放失败:', e));
});

2. 跨域视频加载问题

当视频托管在不同域时，需配置CORS策略：

Access-Control-Allow-Origin: *
或
Access-Control-Allow-Origin: https://yourdomain.com

3. 视频格式转换建议

对于不支持WebM的旧系统，可采用以下转换方案：

# 使用FFmpeg转换格式（示例）
ffmpeg -i input.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 -c:a libopus output.webm

4. 性能优化技巧

分段加载：使用Media Source Extensions实现流式播放
自适应码率：提供不同分辨率版本（360p/720p/1080p）
CDN加速：将视频文件托管至边缘节点
懒加载：滚动到视口时再加载视频

五、进阶应用场景

1. 画中画模式

async function enterPictureInPicture() {
  try {
    if (document.pictureInPictureEnabled) {
      await video.requestPictureInPicture();
    }
  } catch (error) {
    console.error('画中画错误:', error);
  }
}

2. 全屏API控制

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    video.requestFullscreen().catch(err => {
      console.error(`全屏错误: ${err.message}`);
    });
  } else {
    document.exitFullscreen();
  }
}

3. 视频截图功能

function captureFrame() {
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);
  // 导出为图片
  const link = document.createElement('a');
  link.download = 'screenshot.png';
  link.href = canvas.toDataURL();
  link.click();
}

六、安全与隐私考虑

内容安全策略：通过CSP限制视频加载来源
热链接保护：使用签名URL防止未经授权的访问
DRM保护：对付费内容启用EME加密方案
隐私模式：避免使用autoplay收集用户行为数据

通过合理配置这些安全机制，可有效保护视频内容版权和用户隐私。

结语

HTML5

HTML5 标签深度解析：从基础用法到高级控制

一、标签基础与兼容性处理