使用HTML5实现音视频播放器

HTML5为音视频播放提供了原生支持，通过<audio>和<video>标签可以快速实现跨平台的媒体播放功能。结合JavaScript API，还能实现自定义控件、实时监控和高级交互效果。

HTML5音视频标签基础

<audio>和<video>是HTML5新增的两个媒体元素，基本语法结构相似：

<!-- 音频播放器 -->
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  您的浏览器不支持audio元素
</audio>

<!-- 视频播放器 -->
<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持video元素
</video>

关键属性说明：

• controls：显示浏览器默认控制条
• autoplay：加载后自动播放（移动端可能受限）
• loop：循环播放
• muted：静音状态
• preload：预加载策略（none/metadata/auto）

自定义播放器界面

大多数项目需要定制化的播放器界面。以下实现一个基础自定义播放器：

<div class="video-player">
  <video id="myVideo" width="100%">
    <source src="sample.mp4" type="video/mp4">
  </video>
  <div class="controls">
    <button id="playBtn">▶</button>
    <input type="range" id="progressBar" value="0">
    <span id="timeDisplay">00:00 / 00:00</span>
    <button id="muteBtn">🔊</button>
    <input type="range" id="volumeBar" min="0" max="1" step="0.1" value="1">
    <button id="fullscreenBtn">⛶</button>
  </div>
</div>

<style>
.video-player {
  max-width: 800px;
  position: relative;
}
.controls {
  background: rgba(0,0,0,0.7);
  padding: 10px;
  display: flex;
  align-items: center;
}
input[type="range"] {
  flex-grow: 1;
  margin: 0 10px;
}
</style>

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

playBtn.addEventListener('click', () => {
  if(video.paused) {
    video.play();
    playBtn.textContent = '❚❚';
  } else {
    video.pause();
    playBtn.textContent = '▶';
  }
});

video.addEventListener('timeupdate', () => {
  const percent = (video.currentTime / video.duration) * 100;
  progressBar.value = percent;
  timeDisplay.textContent = 
    `${formatTime(video.currentTime)} / ${formatTime(video.duration)}`;
});

function formatTime(seconds) {
  const min = Math.floor(seconds / 60);
  const sec = Math.floor(seconds % 60);
  return `${min}:${sec < 10 ? '0' : ''}${sec}`;
}
</script>

高级功能实现

多源适配与格式检测

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

可以通过JavaScript检测支持的格式：

const video = document.createElement('video');
const canPlayWebm = video.canPlayType('video/webm; codecs="vp8, vorbis"');
const canPlayMp4 = video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

console.log('WebM支持:', canPlayWebm); // "probably", "maybe" 或 ""
console.log('MP4支持:', canPlayMp4);

实时状态监控

video.addEventListener('progress', () => {
  const buffered = video.buffered;
  if(buffered.length > 0) {
    console.log(`已缓冲: ${buffered.end(0)}秒`);
  }
});

video.addEventListener('volumechange', () => {
  console.log(`音量变更为: ${video.volume}`);
});

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

画中画模式

const pipButton = document.getElementById('pipBtn');

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

性能优化技巧

预加载策略

<video preload="metadata">
  <!-- metadata只预加载元数据（时长、尺寸等） -->
</video>

自适应比特率

使用MediaSource Extensions实现自适应流：

const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  fetch('video_low.mp4')
    .then(response => response.arrayBuffer())
    .then(data => {
      sourceBuffer.appendBuffer(data);
      // 根据网络条件切换高/低码率
    });
});

延迟加载

<video preload="none" poster="placeholder.jpg">
  <!-- 用户交互后再加载视频 -->
</video>

<script>
video.addEventListener('click', () => {
  if(!video.src) {
    video.src = 'video.mp4';
    video.load();
  }
});
</script>

移动端特殊处理

内联播放问题

<video playsinline webkit-playsinline>
  <!-- iOS需要这些属性防止全屏播放 -->
</video>

触摸控制优化

const controls = document.querySelector('.controls');
let hideControlsTimeout;

video.addEventListener('touchstart', () => {
  controls.style.display = 'flex';
  clearTimeout(hideControlsTimeout);
  hideControlsTimeout = setTimeout(() => {
    controls.style.display = 'none';
  }, 3000);
});

错误处理与兼容性

video.addEventListener('error', () => {
  switch(video.error.code) {
    case MediaError.MEDIA_ERR_ABORTED:
      console.error('播放被中止');
      break;
    case MediaError.MEDIA_ERR_NETWORK:
      console.error('网络错误');
      break;
    case MediaError.MEDIA_ERR_DECODE:
      console.error('解码错误');
      break;
    case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
      console.error('格式不支持');
      break;
    default:
      console.error('未知错误');
  }
});

// 检测浏览器支持情况
if(!('HTMLMediaElement' in window)) {
  console.warn('浏览器不支持HTML5媒体元素');
  // 回退到Flash或其他方案
}

扩展功能示例

字幕支持

<video>
  <track kind="subtitles" src="subtitles.vtt" srclang="zh" label="中文" default>
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>

视频截图

const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
const screenshotUrl = canvas.toDataURL('image/png');

播放速度控制

const speedControls = document.querySelectorAll('.speed-control');
speedControls.forEach(control => {
  control.addEventListener('click', () => {
    video.playbackRate = parseFloat(control.dataset.speed);
  });
});

实际应用中的注意事项

1. 版权保护：HTML5视频没有DRM原生支持，需要结合Encrypted Media Extensions(EME)
2. 跨域问题：如果视频资源在不同域名，需要正确配置CORS
3. 性能监控：可以使用performance.now()记录关键时间点
4. 内存管理：长时间播放时注意释放不再使用的sourceBuffer

// 内存释放示例
if(mediaSource.readyState === 'open') {
  sourceBuffer.remove(0, 30); // 移除前30秒的缓冲
}

调试技巧

使用Chrome开发者工具的Media面板：

• 查看详细的缓冲情况
• 分析帧率变化
• 检测解码性能

// 强制触发垃圾回收（仅用于调试）
if(window.gc) {
  window.gc();
}