当前位置：首页 > JavaScript

js实现视频播放器

2026-04-04 08:19:46JavaScript

实现基础视频播放器

使用HTML5的<video>标签配合JavaScript可以快速实现基础功能。以下是一个完整示例：

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

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

  // 播放控制
  function playVideo() {
    video.play();
  }

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

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

自定义控制按钮

为替换默认控制条，可通过JavaScript创建自定义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">
  </div>
</div>

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

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

  volumeSlider.addEventListener('input', () => {
    video.volume = volumeSlider.value;
  });
</script>

添加进度条功能

实现视频进度显示和控制：

js实现视频播放器

const progressBar = document.getElementById('progressBar');

video.addEventListener('timeupdate', () => {
  const progress = (video.currentTime / video.duration) * 100;
  progressBar.style.width = `${progress}%`;
});

progressBar.parentElement.addEventListener('click', (e) => {
  const pos = (e.pageX - e.target.offsetLeft) / e.target.offsetWidth;
  video.currentTime = pos * video.duration;
});

全屏控制

添加全屏切换功能：

const fullscreenBtn = document.getElementById('fullscreenBtn');

fullscreenBtn.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    video.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

添加键盘快捷键

实现键盘控制：

js实现视频播放器

document.addEventListener('keydown', (e) => {
  switch(e.code) {
    case 'Space':
      e.preventDefault();
      video.paused ? video.play() : video.pause();
      break;
    case 'ArrowRight':
      video.currentTime += 5;
      break;
    case 'ArrowLeft':
      video.currentTime -= 5;
      break;
  }
});

错误处理

添加视频加载错误处理：

video.addEventListener('error', () => {
  console.error('视频加载失败:', video.error.message);
});

video.addEventListener('stalled', () => {
  console.warn('网络问题导致视频缓冲');
});

高级功能扩展

对于更复杂的需求，可以考虑：

使用MediaSource Extensions实现自适应流
添加字幕轨道支持
实现画中画模式
添加播放速率控制
集成视频分析API

// 画中画示例
const pipBtn = document.getElementById('pipBtn');
pipBtn.addEventListener('click', async () => {
  try {
    if (video !== document.pictureInPictureElement) {
      await video.requestPictureInPicture();
    } else {
      await document.exitPictureInPicture();
    }
  } catch (error) {
    console.error('画中画错误:', error);
  }
});

以上实现可根据具体需求进行组合和扩展，现代浏览器基本都支持这些API，但某些高级功能可能需要检测兼容性。