当前位置：首页 > JavaScript

js实现视频播放

2026-03-01 02:24:21JavaScript

使用HTML5 `<video>` 元素实现基础播放

通过HTML5的<video>标签嵌入视频，配合JavaScript控制播放行为。示例代码如下：

<video id="myVideo" width="400" controls>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持HTML5视频
</video>
<script>
  const video = document.getElementById('myVideo');
  // 播放
  video.play(); 
  // 暂停
  video.pause();
  // 跳转到第10秒
  video.currentTime = 10;
</script>

自定义播放器控件

隐藏原生控件，通过JavaScript监听事件并自定义按钮功能：

<video id="customVideo" width="400"></video>
<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>
<script>
  const customVideo = document.getElementById('customVideo');
  function playVideo() { customVideo.play(); }
  function pauseVideo() { customVideo.pause(); }
  // 监听视频结束事件
  customVideo.addEventListener('ended', () => {
    console.log('播放结束');
  });
</script>

使用第三方库（如Video.js）

Video.js提供跨浏览器兼容性和丰富UI组件。引入库后初始化：

<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet">
<video id="enhancedVideo" class="video-js" controls>
  <source src="video.mp4" type="video/mp4">
</video>
<script src="https://vjs.zencdn.net/7.15.4/video.js"></script>
<script>
  const player = videojs('enhancedVideo');
  player.ready(() => {
    player.addClass('vjs-big-play-centered');
  });
</script>

处理兼容性与格式支持

检测浏览器支持的视频格式，动态切换源文件：

const video = document.createElement('video');
const canPlayMP4 = video.canPlayType('video/mp4');
const canPlayWebM = video.canPlayType('video/webm');
if (canPlayMP4) {
  video.src = 'video.mp4';
} else if (canPlayWebM) {
  video.src = 'video.webm';
}
document.body.appendChild(video);

实现全屏播放

调用全屏API增强用户体验：

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

实时监控播放进度

通过timeupdate事件更新进度条或显示当前时间：

js实现视频播放

video.addEventListener('timeupdate', () => {
  const progress = (video.currentTime / video.duration) * 100;
  console.log(`进度: ${progress.toFixed(2)}%`);
});