如何挂钩由 Brightcove 托管视频结束触发的事件？

【问题标题】：How do I hook into an event triggered by the end of a Brightcove hosted video?如何挂钩由 Brightcove 托管视频结束触发的事件？
【发布时间】：2012-07-25 23:07:36
【问题描述】：

当用户单击带有播放按钮的图像时，我有以下代码显示 Brightcove 播放器：

$(document).ready(function() {
    $('#performanceVideo').hide();
    $('#banner_text_wrap').click(function(e) {
        e.preventDefault();
        $('banner-image').hide().fadeOut(slow);
        $('#performanceVideo').show().fadeIn(slow).css({'float':'left','margin-top':'-251px'});
    });
});

我想在视频结束时将图像淡入。如何使用 jQuery 挂钩视频结束事件？阅读文档，我认为我需要在代码中包含 addEventListener，但我是 JavaScript 新手，因此不胜感激。

【问题讨论】：

标签： javascript jquery video brightcove appcloud

【解决方案1】：

将这两个参数添加到你的播放器sn-p：

<param name="includeAPI" value="true" />
<param name="templateLoadHandler" value="myTemplateLoaded" />

然后添加一个与您在 sn-p 参数中为 templateLoadHandler 提供的值相匹配的 javascript 函数，以便为 videoPlayers 结束事件设置事件侦听器。

function myTemplateLoaded(experienceID){
  player = brightcove.api.getExperience(experienceID);
  modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
  modVP.addEventListener(brightcove.api.events.MediaEvent.COMPLETE,onMediaComplete);
}

然后在完成事件触发时隐藏播放器：

function onMediaComplete(evt){
  $('#performanceVideo').hide();
  $('banner-image').show().fadeIn(slow);
}

【讨论】：