当前位置：首页 > HTML

h5实现视频播放

2026-03-06 09:32:52HTML

视频播放基础实现

在HTML5中实现视频播放主要依赖<video>标签，该标签支持多种视频格式（如MP4、WebM、Ogg）。基础代码如下：

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

controls属性显示默认播放控件（播放/暂停、音量等）。
多<source>标签用于浏览器兼容性兜底。

自定义播放控制

通过JavaScript API可实现自定义控件：

const video = document.getElementById('myVideo');
document.getElementById('playBtn').addEventListener('click', () => {
  video.play();
});
document.getElementById('pauseBtn').addEventListener('click', () => {
  video.pause();
});

常用方法：

play()/pause()：控制播放状态
currentTime：获取或设置播放进度
volume：调整音量（0-1）

响应式视频布局

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

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

结合aspect-ratio属性可固定宽高比：

.video-container {
  aspect-ratio: 16/9;
  width: 100%;
}

跨浏览器兼容方案

针对旧版浏览器可添加Flash兜底：

<video>
  <!-- HTML5 sources -->
  <object data="player.swf" type="application/x-shockwave-flash">
    <param name="movie" value="player.swf">
  </object>
</video>

推荐使用现代polyfill库如video.js或mediaelement.js。

性能优化建议

使用preload="metadata"减少初始加载流量
提供多分辨率源文件通过<source media="(max-width: 800px)" src="mobile.mp4">

实现懒加载：

const video = document.querySelector('video');
const observer = new IntersectionObserver((entries) => {
if(entries[0].isIntersecting) {
  video.src = video.dataset.src;
}
});
observer.observe(video);

直播流支持

通过MSE（Media Source Extensions）可实现动态视频流：

const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
  fetch('video_chunk.mp4').then(response => {
    return response.arrayBuffer();
  }).then(data => {
    sourceBuffer.appendBuffer(data);
  });
});

常用事件监听

关键事件处理示例：

video.addEventListener('loadedmetadata', () => {
  console.log('视频时长：', video.duration);
});

video.addEventListener('timeupdate', () => {
  console.log('当前进度：', video.currentTime);
});

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