h5实现视频

使用HTML5实现视频播放

HTML5提供了内置的<video>标签，可以直接在网页中嵌入视频内容，无需依赖第三方插件如Flash。以下是实现方法和相关细节：

基本语法

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持HTML5视频标签。
</video>

关键属性说明

• controls：显示播放控件（播放/暂停、进度条等）
• width/height：设置视频显示尺寸
• autoplay：页面加载后自动播放（注意：多数浏览器会阻止带声音的自动播放）
• loop：视频循环播放
• muted：默认静音
• poster="image.jpg"：设置视频封面图

支持格式与兼容性

主流浏览器支持的视频格式：

• MP4（H.264编码）：Chrome、Firefox、Safari、Edge
• WebM：Chrome、Firefox、Edge
• Ogg：Chrome、Firefox、Opera

建议提供多种格式源以提高兼容性，浏览器会按顺序检测可播放的第一个格式。

进阶功能实现

自定义控制栏 通过JavaScript API可完全自定义控制界面：

const video = document.querySelector('video');
video.play();  // 播放
video.pause(); // 暂停
video.currentTime = 10; // 跳转到10秒

事件监听

video.addEventListener('timeupdate', () => {
  console.log('当前进度:', video.currentTime);
});
video.addEventListener('ended', () => {
  console.log('播放结束');
});

全屏控制

video.requestFullscreen(); // 进入全屏
document.exitFullscreen(); // 退出全屏

响应式设计技巧

通过CSS确保视频适应不同屏幕：

video {
  max-width: 100%;
  height: auto;
}

性能优化建议

• 使用preload="none"减少初始加载流量（适用于长视频）
• 对移动端考虑使用playsinline属性防止自动全屏
• 提供不同分辨率的视频源（通过<source>的media属性匹配设备）

直播流实现

对于直播场景，可使用MSE（Media Source Extensions）或直接嵌入流地址：

<video controls>
  <source src="http://直播流地址/stream.m3u8" type="application/x-mpegURL">
</video>