js实现视频播放

使用HTML5 video标签实现基础播放

HTML5提供了原生video标签，可以直接在网页中嵌入视频播放器。通过JavaScript控制播放器的行为，例如播放、暂停、音量调节等。

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

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

// 播放视频
function playVideo() {
  video.play();
}

// 暂停视频
function pauseVideo() {
  video.pause();
}

// 调整音量
function setVolume(volume) {
  video.volume = volume;
}
</script>

自定义视频播放器控件

原生video标签的样式和控件可能不符合需求，可以通过隐藏原生控件并创建自定义UI来实现个性化播放器。

<div class="video-container">
  <video id="customVideo">
    <source src="movie.mp4" type="video/mp4">
  </video>
  <div class="controls">
    <button id="playBtn">播放</button>
    <input type="range" id="volumeSlider" min="0" max="1" step="0.1">
    <span id="timeDisplay">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 minutes = Math.floor(video.currentTime / 60);
  const seconds = Math.floor(video.currentTime % 60);
  timeDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
});
</script>

使用第三方库实现高级功能

对于更复杂的需求，如播放列表、字幕支持、自适应比特率等，可以考虑使用第三方JavaScript视频播放器库。

Video.js是一个流行的开源HTML5视频播放器框架，支持多种格式和插件。

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

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

<script>
const player = videojs('videojsPlayer');
player.ready(function() {
  // 播放器就绪后执行的操作
});
</script>

处理跨浏览器兼容性

不同浏览器对视频格式的支持程度不同，为确保最佳兼容性，可以提供多种格式的视频源。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogv" type="video/ogg">
  您的浏览器不支持HTML5视频
</video>

响应式视频播放器

通过CSS确保视频播放器在不同设备上都能正确显示。

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

实现全屏播放功能

现代浏览器提供了全屏API，可以为视频播放器添加全屏功能。

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

处理视频播放事件

通过监听视频事件来增强用户体验，如缓冲、结束、错误等。

video.addEventListener('ended', () => {
  console.log('视频播放结束');
  playBtn.textContent = '播放';
});

video.addEventListener('error', () => {
  console.error('视频加载错误');
});

video.addEventListener('waiting', () => {
  console.log('视频缓冲中...');
});

video.addEventListener('playing', () => {
  console.log('视频开始播放');
});