多媒体API的基本操作（播放、暂停、音量控制等）

多媒体在现代网页中扮演着重要角色，HTML5提供了一系列API来实现音频和视频的控制，包括播放、暂停、音量调整等功能。这些API通过JavaScript直接操作<audio>和<video>元素，为开发者提供了灵活的交互方式。

播放与暂停控制

通过play()和pause()方法可以控制媒体的播放状态。以下是一个基础示例：

<video id="myVideo" src="example.mp4" controls></video>
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>

<script>
  const video = document.getElementById('myVideo');
  document.getElementById('playBtn').addEventListener('click', () => {
    video.play();
  });
  document.getElementById('pauseBtn').addEventListener('click', () => {
    video.pause();
  });
</script>

实际场景中可能需要更复杂的逻辑，比如切换播放状态：

const togglePlay = () => {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
};

音量控制

volume属性范围从0.0（静音）到1.0（最大音量），可通过滑块实时调整：

<input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1">
<script>
  document.getElementById('volumeControl').addEventListener('input', (e) => {
    video.volume = e.target.value;
  });
</script>

静音功能通过muted属性实现：

document.getElementById('muteBtn').addEventListener('click', () => {
  video.muted = !video.muted;
});

进度控制

currentTime属性可获取或设置当前播放位置（秒数），结合duration属性可实现进度条：

<input type="range" id="progressBar" min="0" max="100" value="0">
<script>
  video.addEventListener('timeupdate', () => {
    const percent = (video.currentTime / video.duration) * 100;
    document.getElementById('progressBar').value = percent;
  });
  
  document.getElementById('progressBar').addEventListener('input', (e) => {
    const seekTime = (e.target.value / 100) * video.duration;
    video.currentTime = seekTime;
  });
</script>

播放速率控制

playbackRate属性调整播放速度（1.0为正常速度）：

document.getElementById('speedBtn').addEventListener('click', () => {
  video.playbackRate = video.playbackRate === 1.0 ? 2.0 : 1.0;
});

全屏控制

通过全屏API实现媒体元素全屏：

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

事件监听

关键事件处理示例：

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

video.addEventListener('canplay', () => {
  console.log('媒体可以开始播放');
});

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

多源兼容处理

为兼容不同浏览器，可使用<source>标签：

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

自定义控制界面

完全隐藏原生控件并自定义UI：

video::-webkit-media-controls {
  display: none !important;
}

然后通过JavaScript实现所有控制功能，包括：

• 自定义进度条
• 音量面板
• 播放/暂停按钮状态同步
• 全屏切换图标

移动端特殊处理

针对触摸设备需要额外考虑：

video.addEventListener('touchstart', () => {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
});

高级功能实现

实现画中画模式（需浏览器支持）：

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

性能优化技巧

预加载策略设置：

<video preload="auto" ...>

或根据网络条件动态调整：

if (navigator.connection.effectiveType === '4g') {
  video.preload = 'auto';
} else {
  video.preload = 'metadata';
}

跨浏览器兼容方案

检测API支持的通用方法：

function supportsVideoType(type) {
  const video = document.createElement('video');
  return video.canPlayType(`video/${type}`) !== '';
}

媒体状态同步

在多设备场景下同步播放状态：

// 主设备
video.addEventListener('timeupdate', () => {
  broadcastCurrentTime(video.currentTime);
});

// 从设备
function syncPlayback(time) {
  video.currentTime = time;
  if (!video.paused) video.play();
}

错误处理机制

完整的错误处理示例：

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('未知错误');
  }
});

实时滤镜处理

通过Canvas实现视频滤镜：

const canvas = document.getElementById('filterCanvas');
const ctx = canvas.getContext('2d');

function applyFilter() {
  ctx.drawImage(video, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  // 处理像素数据
  ctx.putImageData(imageData, 0, 0);
  requestAnimationFrame(applyFilter);
}

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

媒体片段播放

播放指定时间段的媒体：

function playSegment(start, end) {
  video.currentTime = start;
  video.play();
  
  const checkTime = () => {
    if (video.currentTime >= end) {
      video.pause();
      video.removeEventListener('timeupdate', checkTime);
    }
  };
  
  video.addEventListener('timeupdate', checkTime);
}

音频可视化

通过Web Audio API实现频谱分析：

const audioCtx = new AudioContext();
const source = audioCtx.createMediaElementSource(video);
const analyser = audioCtx.createAnalyser();
source.connect(analyser);
analyser.connect(audioCtx.destination);

function visualize() {
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);
  analyser.getByteFrequencyData(dataArray);
  // 使用dataArray绘制可视化效果
  requestAnimationFrame(visualize);
}

video.addEventListener('play', () => {
  audioCtx.resume().then(() => {
    visualize();
  });
});