当前位置：首页 > JavaScript

js实现视频播放器

2026-03-01 07:44:15JavaScript

实现基础视频播放器

使用HTML5的<video>标签结合JavaScript可以快速实现一个基础视频播放器。以下是一个简单示例：

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

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

// 播放控制
function togglePlay() {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
}

// 音量控制
function setVolume(volume) {
  video.volume = volume;
}

// 全屏切换
function toggleFullscreen() {
  if (!document.fullscreenElement) {
    video.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}
</script>

自定义播放器控件

创建完全自定义的播放器界面需要隐藏原生控件并实现自己的UI：

<div class="video-container">
  <video id="customVideo" width="640" height="360">
    <source src="video.mp4" type="video/mp4">
  </video>
  <div class="controls">
    <button id="playBtn">播放/暂停</button>
    <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1">
    <span id="timeDisplay">00:00 / 00:00</span>
  </div>
</div>

<script>
const video = document.getElementById('customVideo');
const playBtn = document.getElementById('playBtn');
const volumeSlider = document.getElementById('volumeSlider');
const timeDisplay = document.getElementById('timeDisplay');

// 播放/暂停控制
playBtn.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    playBtn.textContent = '暂停';
  } else {
    video.pause();
    playBtn.textContent = '播放';
  }
});

// 音量控制
volumeSlider.addEventListener('input', () => {
  video.volume = volumeSlider.value;
});

// 更新时间显示
video.addEventListener('timeupdate', () => {
  const currentTime = formatTime(video.currentTime);
  const duration = formatTime(video.duration);
  timeDisplay.textContent = `${currentTime} / ${duration}`;
});

function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  seconds = Math.floor(seconds % 60);
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
</script>

高级功能实现

添加进度条控制和键盘快捷键等高级功能：

// 进度条控制
const progressBar = document.createElement('input');
progressBar.type = 'range';
progressBar.min = 0;
progressBar.max = 100;
progressBar.value = 0;
document.querySelector('.controls').prepend(progressBar);

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

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

// 键盘快捷键
document.addEventListener('keydown', (e) => {
  switch(e.key) {
    case ' ':
      togglePlay();
      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;
  }
});

跨浏览器兼容性处理

处理不同浏览器的兼容性问题：

// 检测支持的视频格式
function supportsVideoType(type) {
  const video = document.createElement('video');
  return video.canPlayType(type) !== '';
}

// 提供多种视频源
if (!supportsVideoType('video/mp4')) {
  const source = document.querySelector('source');
  source.src = 'video.webm';
  source.type = 'video/webm';
}

// 全屏API兼容性处理
function toggleFullscreen() {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) {
    video.msRequestFullscreen();
  }
}

响应式设计

使播放器适应不同屏幕尺寸：

.video-container {
  position: relative;
  max-width: 100%;
}

.video-container video {
  width: 100%;
  height: auto;
}

.controls {
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.7);
  padding: 10px;
  gap: 10px;
}

input[type="range"] {
  flex-grow: 1;
}

这些代码片段展示了从基础到高级的视频播放器实现方法，可以根据需求组合使用或进一步扩展功能。

js实现视频播放器