HTML5自定义音视频播放器：如何让系统识别并启用上/下曲功能

核心原因：你没告诉系统有播放列表 #

你之前尝试的<video>多源、ul/li播放列表都是前端自身逻辑——系统（Chrome、Mac状态栏）完全感知不到这些内容，自然不会启用上下曲按钮。要让系统识别，必须用Media Session API主动向系统暴露媒体操作能力。

关键实现步骤 #

不需要特定的HTML播放列表结构（比如ul/li），只要你有播放列表的逻辑（比如一个存曲目信息的数组），就能实现：

1. 定义播放列表与当前曲目状态

// 用数组存播放列表，结构自定义，包含曲目地址和元数据
const playlist = [
  { title: "视频1", src: "video1.mp4" },
  { title: "视频2", src: "video2.mp4" },
  { title: "视频3", src: "video3.mp4" }
];
let currentIndex = 0;
const video = document.querySelector('video');

2. 更新媒体会话，向系统注册操作
   写一个函数，每次切换曲目时调用，告诉系统当前媒体信息和可用操作：

function updateMediaSession() {
  if (!('mediaSession' in navigator)) return; // 兼容不支持的浏览器

  const currentTrack = playlist[currentIndex];
  // 设置媒体元数据（可选，但能让系统控件显示曲目名称等信息）
  navigator.mediaSession.metadata = new MediaMetadata({
    title: currentTrack.title
    // 可选：添加 artist、album、poster 等字段
  });

  // 注册上一曲操作：只有当前不是第一首时触发切换
  navigator.mediaSession.setActionHandler('previoustrack', () => {
    if (currentIndex > 0) {
      currentIndex--;
      loadTrack();
    }
  });

  // 注册下一曲操作：只有当前不是最后一首时触发切换
  navigator.mediaSession.setActionHandler('nexttrack', () => {
    if (currentIndex < playlist.length - 1) {
      currentIndex++;
      loadTrack();
    }
  });
}

// 加载当前选中的曲目
function loadTrack() {
  video.src = playlist[currentIndex].src;
  video.play();
  updateMediaSession(); // 切换后更新媒体会话
}

3. 初始化播放器
   页面加载完成后启动播放器，确保媒体会话被初始化：

document.addEventListener('DOMContentLoaded', () => {
  loadTrack();
  // 监听播放事件，确保媒体会话状态同步
  video.addEventListener('play', updateMediaSession);
});

系统启用上下曲按钮的条件 #

• 必须通过navigator.mediaSession.setActionHandler注册previoustrack和nexttrack操作处理器——系统会根据这些注册判断按钮是否启用。
• 如果想在没有上/下曲时让按钮变灰，可以动态移除对应的处理器：

// 比如当前是第一首，禁用上一曲按钮
navigator.mediaSession.setActionHandler('previoustrack', null);

注意事项 #

• Media Session API需要在HTTPS环境下工作（本地开发用localhost不受限制）。
• 主流浏览器（Chrome、Edge、Safari 14.1+）都支持该API的核心功能。
• 音频播放器的实现逻辑完全相同，只需把<video>换成<audio>标签。

内容的提问来源于stack exchange，提问作者user27521541