如何为多个及AJAX加载的Dailymotion播放器添加事件监听器

1. 定义通用事件回调函数 #

先把要执行的业务逻辑抽成独立函数，方便所有播放器复用：

// 以监听PLAYER_START事件为例，定义通用回调
const handlePlayerStart = (state) => {
  console.log('视频开始播放:', state);
  // 这里添加你的业务逻辑，比如统计播放行为、更新页面状态等
};

2. 处理页面初始加载的多个播放器 #

页面加载完成后已存在的多个播放器，不要用getPlayer()（仅返回第一个实例），改用getPlayers()获取所有播放器实例的Promise数组，遍历绑定事件：

// 获取所有初始加载的播放器实例并绑定事件
dailymotion.getPlayers()
  .then((players) => {
    players.forEach(player => {
      player.on(dailymotion.events.PLAYER_START, handlePlayerStart);
    });
  });

3. 处理AJAX动态加载的播放器 #

对于通过点击按钮、AJAX异步创建的播放器，直接在createPlayer的then回调中绑定事件——因为createPlayer返回的Promise会在播放器创建完成后返回实例：

// 封装动态创建播放器的函数
function createDailymotionPlayer(iframeID, videoSrc) {
  dailymotion.createPlayer(iframeID, {
    video: videoSrc,
    params: {
      // 可添加播放器参数，比如autoplay、controls等
    },
  })
  .then((player) => {
    console.log('动态播放器创建完成:', player);
    // 为新创建的播放器绑定事件
    player.on(dailymotion.events.PLAYER_START, handlePlayerStart);
  });
}

// 调用示例：按钮点击触发动态加载
document.querySelector('#load-video-btn').addEventListener('click', () => {
  const uniqueIframeId = `player-${Date.now()}`; // 生成唯一iframe ID
  const videoSrc = '你的视频ID'; // 假设已通过AJAX获取到视频ID
  createDailymotionPlayer(uniqueIframeId, videoSrc);
});

额外提示 #

• 如需监听其他事件（如PLAYER_PAUSE、PLAYER_END），只需替换dailymotion.events.XXX，回调函数可复用或单独定义。
• 若需在播放器销毁时移除监听，可调用player.off(dailymotion.events.PLAYER_START, handlePlayerStart)，避免内存泄漏。

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