当前位置：首页 > JavaScript

js实现视频播放器

2026-01-30 16:39:56JavaScript

实现基础视频播放器

使用HTML5的<video>标签结合JavaScript可以实现一个基础视频播放器。以下是核心代码示例：

<video id="myVideo" width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<div class="controls">
  <button id="playBtn">播放</button>
  <button id="pauseBtn">暂停</button>
  <input type="range" id="progressBar" min="0" max="100" value="0">
</div>

const video = document.getElementById('myVideo');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const progressBar = document.getElementById('progressBar');

playBtn.addEventListener('click', () => {
  video.play();
});

pauseBtn.addEventListener('click', () => {
  video.pause();
});

video.addEventListener('timeupdate', () => {
  const progress = (video.currentTime / video.duration) * 100;
  progressBar.value = progress;
});

progressBar.addEventListener('input', () => {
  const seekTime = (progressBar.value / 100) * video.duration;
  video.currentTime = seekTime;
});

添加音量控制

扩展播放器功能，添加音量控制：

const volumeControl = document.createElement('input');
volumeControl.type = 'range';
volumeControl.min = '0';
volumeControl.max = '1';
volumeControl.step = '0.1';
volumeControl.value = '1';

volumeControl.addEventListener('input', () => {
  video.volume = volumeControl.value;
});

document.querySelector('.controls').appendChild(volumeControl);

实现全屏功能

添加全屏切换按钮：

js实现视频播放器

const fullscreenBtn = document.createElement('button');
fullscreenBtn.textContent = '全屏';

fullscreenBtn.addEventListener('click', () => {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) {
    video.msRequestFullscreen();
  }
});

document.querySelector('.controls').appendChild(fullscreenBtn);

添加键盘快捷键

实现键盘控制功能：

document.addEventListener('keydown', (e) => {
  switch(e.key) {
    case ' ':
      video.paused ? video.play() : video.pause();
      break;
    case 'ArrowRight':
      video.currentTime += 5;
      break;
    case 'ArrowLeft':
      video.currentTime -= 5;
      break;
    case 'ArrowUp':
      video.volume = Math.min(video.volume + 0.1, 1);
      break;
    case 'ArrowDown':
      video.volume = Math.max(video.volume - 0.1, 0);
      break;
    case 'f':
      video.requestFullscreen();
      break;
  }
});

添加自定义样式

使用CSS美化播放器界面：

js实现视频播放器

.controls {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #333;
  border-radius: 0 0 5px 5px;
}

button {
  padding: 5px 15px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background: #45a049;
}

input[type="range"] {
  width: 100%;
}

处理不同视频格式

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

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

添加播放列表功能

实现多视频切换：

const playlist = [
  { title: '视频1', src: 'video1.mp4' },
  { title: '视频2', src: 'video2.mp4' }
];

let currentVideoIndex = 0;

const nextBtn = document.createElement('button');
nextBtn.textContent = '下一个';

nextBtn.addEventListener('click', () => {
  currentVideoIndex = (currentVideoIndex + 1) % playlist.length;
  video.src = playlist[currentVideoIndex].src;
  video.play();
});

document.querySelector('.controls').appendChild(nextBtn);