当前位置：首页 > JavaScript

js实现播放视频

2026-02-03 06:26:36JavaScript

使用HTML5 `<video>` 元素

HTML5提供了原生支持视频播放的<video>标签，通过JavaScript可以控制其行为。以下是一个基本实现示例：

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  const video = document.getElementById('myVideo');
  // 播放视频
  video.play();
  // 暂停视频
  video.pause();
  // 跳转到指定时间（秒）
  video.currentTime = 10;
</script>

自定义播放器控件

通过JavaScript可以完全自定义播放器界面，隐藏原生控件并添加自定义按钮：

<video id="customVideo" width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>
<div>
  <button onclick="playVideo()">播放</button>
  <button onclick="pauseVideo()">暂停</button>
  <input type="range" id="seekBar" value="0">
</div>

<script>
  const video = document.getElementById('customVideo');
  const seekBar = document.getElementById('seekBar');

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }

  // 更新进度条
  video.addEventListener('timeupdate', () => {
    seekBar.value = (video.currentTime / video.duration) * 100;
  });

  // 跳转视频
  seekBar.addEventListener('input', () => {
    video.currentTime = (seekBar.value / 100) * video.duration;
  });
</script>

使用Video.js库

Video.js是一个流行的开源HTML5视频播放器库，支持跨浏览器兼容性和丰富功能：

<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet">
<video id="videojs-player" class="video-js" controls preload="auto" width="640" height="264">
  <source src="movie.mp4" type="video/mp4">
</video>
<script src="https://vjs.zencdn.net/7.20.3/video.js"></script>
<script>
  const player = videojs('videojs-player');
  player.play();
</script>

处理全屏播放

JavaScript可以控制视频进入或退出全屏模式：

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

监听视频事件

视频元素提供多种事件监听，用于处理不同播放状态：

video.addEventListener('play', () => console.log('视频开始播放'));
video.addEventListener('pause', () => console.log('视频已暂停'));
video.addEventListener('ended', () => console.log('视频播放结束'));
video.addEventListener('error', () => console.error('视频加载错误'));

兼容多格式视频源

为兼容不同浏览器，可以提供多种视频格式源：

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

移动端自动播放处理

移动端浏览器通常阻止自动播放，需要用户交互触发：

js实现播放视频

document.addEventListener('click', () => {
  const video = document.getElementById('myVideo');
  video.play().catch(e => console.log('自动播放被阻止:', e));
}, { once: true });