HTMLMediaElement API：彻底掌握视频的编程接口

const video = document.querySelector('video');
 
// 错误写法：不判断状态直接调用
video.play(); // 可能在 readyState=0 时调用，毫无意义
 
// 正确写法：等待足够的数据
video.addEventListener('canplay', () => {
  console.log('readyState:', video.readyState); // 至少是 3
  video.play();
});
 
// 或者主动判断
if (video.readyState >= 3) {
  video.play();
} else {
  video.addEventListener('canplay', () => video.play(), { once: true });
}

// 实现播放/暂停按钮的状态切换
function updatePlayButton() {
  const btn = document.querySelector('.play-btn');
  if (video.paused || video.ended) {
    btn.textContent = '▶ 播放';
    btn.dataset.state = 'paused';
  } else {
    btn.textContent = '⏸ 暂停';
    btn.dataset.state = 'playing';
  }
}
 
video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);
video.addEventListener('ended', updatePlayButton);

video.addEventListener('error', () => {
  const error = video.error;
  if (!error) return;
 
  const messages = {
    1: '播放被中止',
    2: '网络错误，请检查连接',
    3: '视频解码失败，文件可能已损坏',
    4: '不支持的视频格式或视频源无效',
  };
 
  const msg = messages[error.code] || '未知错误';
  console.error(`[MediaError ${error.code}] ${msg}`, error.message);
 
  // 展示错误 UI
  showErrorOverlay(msg);
 
  // code=2 时尝试重试
  if (error.code === 2) {
    setTimeout(() => {
      video.load(); // 重新加载
      video.play();
    }, 3000);
  }
});

// 读取格式化时间
function formatTime(seconds) {
  if (isNaN(seconds)) return '0:00';
  const m = Math.floor(seconds / 60);
  const s = Math.floor(seconds % 60).toString().padStart(2, '0');
  return `${m}:${s}`;
}
 
// 进度条点击跳转
progressBar.addEventListener('click', (e) => {
  const rect = progressBar.getBoundingClientRect();
  const ratio = (e.clientX - rect.left) / rect.width;
  video.currentTime = ratio * video.duration; // 直接赋值跳转
});
 
// 实时更新进度条
video.addEventListener('timeupdate', () => {
  const progress = (video.currentTime / video.duration) * 100;
  progressFill.style.width = `${progress}%`;
  timeDisplay.textContent = `${formatTime(video.currentTime)} / ${formatTime(video.duration)}`;
});

// 获取当前播放位置之后的已缓冲量
function getBufferedEnd(video) {
  const buffered = video.buffered;
  const currentTime = video.currentTime;
 
  for (let i = 0; i < buffered.length; i++) {
    if (buffered.start(i) <= currentTime && currentTime <= buffered.end(i)) {
      return buffered.end(i); // 当前所在缓冲段的末端
    }
  }
  return currentTime; // 没找到，返回当前时间
}
 
// 在进度条上绘制缓冲进度
video.addEventListener('progress', () => {
  const bufferedEnd = getBufferedEnd(video);
  const bufferedPercent = (bufferedEnd / video.duration) * 100;
  bufferBar.style.width = `${bufferedPercent}%`;
});

video.addEventListener('loadedmetadata', () => {
  const canvas = document.createElement('canvas');
  // 必须用 videoWidth/videoHeight，不是 video.offsetWidth
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);
  const dataURL = canvas.toDataURL('image/jpeg');
});

// 实现音量滑块
volumeSlider.addEventListener('input', (e) => {
  video.volume = parseFloat(e.target.value); // 0.0 ~ 1.0
  video.muted = video.volume === 0;
  updateVolumeIcon();
});
 
// 实现静音切换
muteBtn.addEventListener('click', () => {
  video.muted = !video.muted;
  // 注意：muted 后 volume 不变，取消静音会恢复之前的音量
  updateVolumeIcon();
});

// 倍速选择器
const rates = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0];
 
rateSelector.addEventListener('change', (e) => {
  video.playbackRate = parseFloat(e.target.value);
});
 
// 读取当前速率
video.addEventListener('ratechange', () => {
  console.log('当前速率:', video.playbackRate);
});

pipBtn.addEventListener('click', async () => {
  try {
    if (document.pictureInPictureElement) {
      // 已经在画中画，退出
      await document.exitPictureInPicture();
    } else {
      // 进入画中画
      await video.requestPictureInPicture();
    }
  } catch (err) {
    console.error('画中画失败:', err);
  }
});
 
// 监听进入/退出事件
video.addEventListener('enterpictureinpicture', () => {
  pipBtn.textContent = '退出画中画';
});
 
video.addEventListener('leavepictureinpicture', () => {
  pipBtn.textContent = '画中画';
});

async function safePlay(video) {
  try {
    await video.play();
  } catch (err) {
    if (err.name === 'NotAllowedError') {
      // autoplay 被浏览器策略阻止，需要用户手动触发
      showManualPlayButton();
    } else if (err.name === 'AbortError') {
      // play() 被另一个 load() 或 src 更改打断，通常可以忽略
      console.warn('播放被中断，可能是 src 发生了变化');
    } else {
      console.error('播放失败:', err);
    }
  }
}

function switchVideo(newSrc) {
  video.src = newSrc;
  video.load(); // 必须调用 load() 才能触发新的加载
  video.play();
}
 
// 或者用 source 子标签切换
function switchVideoWithSource(newSrc) {
  const source = video.querySelector('source');
  source.src = newSrc;
  video.load(); // 同样需要 load()
}

function getBestVideoSrc(mp4Src, webmSrc) {
  const video = document.createElement('video');
 
  // 返回值: 'probably' | 'maybe' | ''
  if (video.canPlayType('video/webm; codecs="vp9, opus"') === 'probably') {
    return webmSrc; // 优先 WebM
  } else if (video.canPlayType('video/mp4; codecs="avc1.42E01E"') !== '') {
    return mp4Src; // 兜底 MP4
  }
  return null; // 都不支持
}

// 精确的逐帧 Canvas 绘制（比 rAF 更高效）
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
 
const processFrame = (now, metadata) => {
  // metadata 包含丰富的帧信息
  console.log({
    presentationTime: metadata.presentationTime, // 帧呈现时间戳
    mediaTime: metadata.mediaTime,               // 精确的媒体时间（比 currentTime 更准）
    presentedFrames: metadata.presentedFrames,   // 已呈现的总帧数
    width: metadata.width,                       // 帧宽度
    height: metadata.height,                     // 帧高度
  });
 
  // 将当前帧绘制到 Canvas
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
 
  // 重新注册，处理下一帧
  video.requestVideoFrameCallback(processFrame);
};
 
// 开始处理
video.requestVideoFrameCallback(processFrame);

if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
  video.requestVideoFrameCallback(processFrame);
} else {
  // 降级到 requestAnimationFrame
  const fallback = () => {
    ctx.drawImage(video, 0, 0);
    requestAnimationFrame(fallback);
  };
  requestAnimationFrame(fallback);
}

// 有多个 source 时
// video.src 可能是空字符串（因为 src 属性没有设置在 video 上）
// video.currentSrc 才是浏览器选中的那个 source 的 URL
 
video.addEventListener('loadedmetadata', () => {
  console.log('实际播放源:', video.currentSrc);
  // 输出类似: https://cdn.example.com/video.webm
});

class VideoController {
  constructor(videoEl) {
    this.video = videoEl;
    this.init();
  }
 
  init() {
    const v = this.video;
 
    // 状态监控
    v.addEventListener('loadedmetadata', () => {
      console.log(`视频就绪: ${v.videoWidth}x${v.videoHeight}, 时长: ${v.duration}s`);
    });
 
    // 缓冲进度
    v.addEventListener('progress', () => this.updateBufferBar());
 
    // 播放进度
    v.addEventListener('timeupdate', () => this.updateProgressBar());
 
    // 等待缓冲
    v.addEventListener('waiting', () => this.showLoadingSpinner());
    v.addEventListener('playing', () => this.hideLoadingSpinner());
 
    // 错误处理
    v.addEventListener('error', () => this.handleError());
 
    // 播放结束
    v.addEventListener('ended', () => this.onEnded());
  }
 
  async play() {
    try {
      await this.video.play();
    } catch (err) {
      if (err.name === 'NotAllowedError') {
        this.showPlayButton(); // 需要用户手动点击
      }
    }
  }
 
  seek(time) {
    // 确保在可跳转范围内
    const clampedTime = Math.max(0, Math.min(time, this.video.duration));
    this.video.currentTime = clampedTime;
  }
 
  setVolume(val) {
    this.video.volume = Math.max(0, Math.min(1, val));
  }
 
  setRate(rate) {
    this.video.playbackRate = rate;
  }
 
  getBufferedPercent() {
    const v = this.video;
    if (!v.duration) return 0;
    const bufferedEnd = v.buffered.length
      ? v.buffered.end(v.buffered.length - 1)
      : 0;
    return (bufferedEnd / v.duration) * 100;
  }
 
  handleError() {
    const code = this.video.error?.code;
    const msgs = { 1: '已中止', 2: '网络错误', 3: '解码失败', 4: '格式不支持' };
    console.error('[播放错误]', msgs[code] || '未知');
  }
 
  // ... 其他方法
}
 
const controller = new VideoController(document.querySelector('video'));