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

时间:2012-07-24 16:38:09

标签: javascript jquery video brightcove appcloud

当用户点击带有播放按钮的图像时,我有以下代码来显示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新手,所以感谢任何帮助。

1 个答案:

答案 0 :(得分:5)

将这两个参数添加到您的播放器代码段中:

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

然后添加一个javascript函数,该函数与您在snippet参数中为templateLoadHandler提供的值相匹配,以便为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);
}