技术咨询：如何在Brightcove播放列表中获取选中视频的Video ID

嗨，我来帮你搞定这个需求！当用户选中Brightcove播放列表里的视频时，要获取对应的Video ID其实很简单，主要是利用Brightcove Player API提供的事件和方法，下面分两种常见情况给你说明：

情况1：使用Brightcove自带的播放列表组件 #

如果你的播放列表是Brightcove官方自带的（比如通过Studio配置的播放列表播放器），可以直接监听播放器的playlistchange事件来捕获视频切换动作：

// 先获取你的Brightcove播放器实例，替换成你实际的播放器ID
const player = brightcove.getPlayer('your-player-id');

// 确保播放器初始化完成后再绑定事件
player.on('ready', () => {
  // 监听播放列表切换事件（用户选中新视频时触发）
  player.on('playlistchange', () => {
    // 获取当前选中视频在播放列表中的索引
    const currentIndex = player.playlist.currentIndex();
    // 获取整个播放列表的视频数据数组
    const playlistItems = player.playlist();
    // 提取当前选中视频的Video ID
    const selectedVideoId = playlistItems[currentIndex].id;

    console.log('当前选中的视频ID：', selectedVideoId);
    // 这里可以把ID用于你的业务逻辑，比如存储、展示或后续调用API等
  });
});

补充说明： #

• playlistchange事件会在用户点击播放列表项、使用播放器的上/下切换按钮时触发，覆盖所有官方播放列表的交互场景。
• 每个播放列表项的对象里，id字段就是你需要的Video ID，除此之外还包含标题、时长等其他视频元数据，按需取用即可。

情况2：使用自定义的播放列表UI #

如果你的播放列表是自己开发的自定义UI（不是Brightcove自带的组件），可以给每个播放列表项绑定点击事件，直接从元素属性中获取ID：

<!-- 假设你的自定义播放列表项结构是这样的，给每个项加上data-video-id存储ID -->
<div class="custom-playlist-item" data-video-id="123456">视频1</div>
<div class="custom-playlist-item" data-video-id="789012">视频2</div>
<div class="custom-playlist-item" data-video-id="345678">视频3</div>

// 给所有播放列表项绑定点击事件
document.querySelectorAll('.custom-playlist-item').forEach(item => {
  item.addEventListener('click', function() {
    // 从data属性中获取Video ID
    const selectedVideoId = this.getAttribute('data-video-id');
    console.log('当前选中的视频ID：', selectedVideoId);

    // 可选：如果需要切换播放器中的视频，可以调用Brightcove API
    // player.playlist.currentItem(对应的索引);
    // 或者直接加载该视频：player.catalog.getVideo(selectedVideoId).then(video => player.catalog.load(video));
  });
});

这样不管是用官方组件还是自定义UI，都能轻松获取到用户选中视频的Video ID啦！

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