当前位置：首页 > JavaScript

js代码实现视频播放

2026-01-31 03:32:27JavaScript

使用HTML5 Video标签

HTML5提供了<video>标签，可以直接嵌入视频播放器，无需第三方插件。通过JavaScript可以控制播放、暂停、音量等功能。

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

<script>
  const video = document.getElementById('myVideo');
  // 播放视频
  video.play();
  // 暂停视频
  video.pause();
  // 调整音量（0到1）
  video.volume = 0.5;
</script>

使用Video.js库

Video.js是一个开源的HTML5视频播放器库，支持多种格式和自定义样式。

js代码实现视频播放

<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.15.4/video.js"></script>

<video id="myPlayer" class="video-js" controls preload="auto" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
</video>

<script>
  const player = videojs('myPlayer');
  player.play();
</script>

动态加载视频源

通过JavaScript动态切换视频源，适用于多视频切换场景。

function changeVideoSource(newSource) {
  const video = document.getElementById('myVideo');
  video.src = newSource;
  video.load();
  video.play();
}

监听视频事件

可以监听视频的各种事件，如播放结束、时间更新等。

js代码实现视频播放

const video = document.getElementById('myVideo');
video.addEventListener('ended', () => {
  console.log('视频播放结束');
});
video.addEventListener('timeupdate', () => {
  console.log('当前播放时间：', video.currentTime);
});

全屏播放控制

通过JavaScript控制视频全屏播放。

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

自定义播放器控件

完全自定义播放器界面，隐藏原生控件并通过JavaScript实现功能。

<div id="customPlayer">
  <video id="myVideo" width="320" height="240">
    <source src="video.mp4" type="video/mp4">
  </video>
  <div>
    <button onclick="document.getElementById('myVideo').play()">播放</button>
    <button onclick="document.getElementById('myVideo').pause()">暂停</button>
    <input type="range" min="0" max="1" step="0.1" 
           onchange="document.getElementById('myVideo').volume = this.value">
  </div>
</div>