html5怎么播放视频

# HTML5怎么播放视频

HTML5通过`<video>`标签原生支持视频播放功能，无需依赖Flash等插件。本文将详细介绍如何使用HTML5实现视频播放，包括基础用法、属性控制、事件监听以及兼容性处理等内容。

## 一、基础视频播放

### 1. 基本语法
```html
<video src="video.mp4" controls>
  您的浏览器不支持HTML5视频
</video>

• src：指定视频文件路径
• controls：显示默认播放控件（播放/暂停、进度条等）
• 标签内的文字会在浏览器不支持时显示

2. 多格式支持

不同浏览器支持的视频格式不同，建议提供多种格式：

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogv" type="video/ogg">
</video>

浏览器会按顺序尝试加载第一个支持的格式。

二、常用属性控制

示例：

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

三、JavaScript控制播放

1. 基本方法

const video = document.querySelector('video');

// 播放
video.play(); 

// 暂停
video.pause();

// 跳转到指定时间（秒）
video.currentTime = 10;

2. 常用属性

// 获取/设置音量（0-1）
video.volume = 0.5;

// 是否静音
video.muted = true;

// 获取视频时长
video.duration;

3. 事件监听

video.addEventListener('play', () => {
  console.log('视频开始播放');
});

video.addEventListener('ended', () => {
  console.log('视频播放结束');
});

video.addEventListener('timeupdate', () => {
  console.log('当前播放位置：', video.currentTime);
});

四、进阶功能实现

1. 自定义控制条

通过隐藏默认控件并自行创建按钮实现：

<video id="myVideo" src="video.mp4"></video>
<div class="controls">
  <button onclick="document.getElementById('myVideo').play()">播放</button>
  <button onclick="document.getElementById('myVideo').pause()">暂停</button>
  <input type="range" onchange="video.currentTime=this.value">
</div>

2. 全屏控制

// 进入全屏
video.requestFullscreen();

// 退出全屏
document.exitFullscreen();

五、兼容性处理

1. 检测浏览器支持

if(!!document.createElement('video').canPlayType) {
  // 支持HTML5视频
} else {
  // 回退方案（如Flash播放器）
}

2. 移动端注意事项

• iOS需要添加playsinline属性实现内联播放
• 部分浏览器限制自动播放，需用户交互后触发

六、最佳实践建议

1. 优先使用MP4(H.264)+WebM双格式组合
2. 视频压缩建议：
   • 分辨率：根据需求选择1080p/720p
   • 码率：1.5-3Mbps（高清）
3. 考虑使用CDN加速视频加载
4. 大视频建议分片加载（HLS/DASH）

通过HTML5视频技术，开发者可以轻松创建跨平台的视频播放体验。结合JavaScript API还能实现更丰富的交互功能，如弹幕、倍速播放等高级特性。 “`