如何为通过Brightcove Player Loader加载的播放器切换指定ID视频

正确实现方案 #

原因说明 #

直接给myPlayer.videoId赋值不会生效，是因为Brightcove Player没有监听该属性的变化，必须调用官方提供的内置API触发视频资源的加载流程。 #

标准实现代码 #

建议先把每个缩略图对应的视频ID存在DOM的自定义数据属性中，写法更规范易维护，示例如下：

<!-- 缩略图示例，把视频ID存到data-vid-id属性 -->
<img class="vid-thumbnail" data-vid-id="替换为对应视频ID" src="缩略图地址" alt="视频封面">

点击事件的正确写法，建议绑定逻辑放在播放器初始化完成的回调内，避免实例未初始化报错：

brightcovePlayerLoader({
    refNode: document.querySelector('#mainvid'),
    accountId: myaccountId, // 全局账号变量
    playerId: '947WeZ6d',
    videoId: mainvidID
})
.then(function(success) {
    myPlayer = success.ref;
    // 播放器初始化完成后再绑定点击事件
    bindThumbnailClick();
    myPlayer.on('loadedmetadata',function(){
        // 原有逻辑保留
    });
})
.catch(function(error) {
    console.log('播放器初始化失败', error);
});

// 缩略图点击事件绑定
function bindThumbnailClick() {
    $('.vid-thumbnail').on('click', function() {
        // 读取当前点击缩略图对应的视频ID
        const targetVidId = $(this).data('vid-id');
        // 调用catalog API加载新视频
        myPlayer.catalog.getVideo(targetVidId, function(err, videoObj) {
            if (err) {
                console.error('视频加载失败：', err);
                return;
            }
            myPlayer.catalog.load(videoObj);
            // 需要自动播放可以打开下面注释
            // myPlayer.play();
        });
    });
}

简化写法（适用于v6.40.0及以上版本的Brightcove Player） #

新版本播放器已经封装了loadVideo方法，不需要手动调用catalog的两层方法：

function bindThumbnailClick() {
    $('.vid-thumbnail').on('click', async function() {
        const targetVidId = $(this).data('vid-id');
        try {
            await myPlayer.loadVideo(targetVidId);
            // 自动播放可选
            // myPlayer.play();
        } catch (err) {
            console.error('视频加载失败：', err);
        }
    });
}

注意事项 #

• 确保视频ID和你的Brightcove账号权限匹配，非公开视频需要额外处理鉴权逻辑
• 如果项目中没有使用jQuery，把对应选择器和事件绑定替换为原生JS写法即可

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