在图像单击时触发 Brightcove 视频播放，并在视频播放完毕后将其隐藏答案

【问题标题】：Trigger Brightcove video play on image click and hide it when video is done在图像单击时触发 Brightcove 视频播放，并在视频播放完毕后将其隐藏
【发布时间】：2015-06-19 03:48:35
【问题描述】：

我正在尝试在点击图片时播放视频，并在视频播放完毕后将其隐藏，到目前为止，我的结构如下：

<a href="#">
    <div style="display:none"></div>
    <div class="overlay_play_big"></div>
    <div class="overlay_label">
        <span class="title">Bones</span><br />
        <span class="desc">Season 8, Episode 19</span>
    </div>

    <!--
    By use of this code snippet, I agree to the Brightcove Publisher T and C 
    found at https://accounts.brightcove.com/en/terms-and-conditions/. 
    -->
    <script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

    <object id="myExperience2768811593001" class="BrightcoveExperience">
        <param name="bgcolor" value="#FFFFFF" />
        <param name="width" value="470" />
        <param name="height" value="292" />
        <param name="playerID" value="2764056952001" />
        <param name="playerKey" value="AQ~~,AAACg0nERbk~,bDrRQnHHnTJYYUzl4RqDhsPQ_y-ladJF" />
        <param name="isVid" value="true" />
        <param name="dynamicStreaming" value="true" />
        <param name="includeAPI" value="true" /> 
        <param name="templateLoadHandler" value="onTemplateLoaded" /> 
        <param name="templateReadyHandler" value="onTemplateReady" />
        <param name="@videoPlayer" value="2768811593001" />
    </object>

    <script type="text/javascript">
        var player, modVP;

        function onTemplateLoaded(experienceID) {
          player = brightcove.api.getExperience(experienceID);
          modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
        }

        function onTemplateReady(evt) {
          modVP.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, onComplete);
        }

        function onComplete(evt) {
          alert("Video ended");
        }
    </script>

    <!-- 
    This script tag will cause the Brightcove Players defined above it to be created as soon
    as the line is read by the browser. If you wish to have the player instantiated only after
    the rest of the HTML is processed and the page load is complete, remove the line.
    -->
    <script type="text/javascript">brightcove.createExperiences();</script>
    <!-- End of Brightcove Player -->
</a>

我想在点击overlay_play_big div 时触发视频播放。我正在使用 Brightcove API，但即使是这个简单的警报也不起作用。视频结束，没有任何反应。我该怎么做，还是我犯了一个错误？

【问题讨论】：

标签： javascript jquery video brightcove

【解决方案1】：

下面的代码将按预期工作..

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Player Event Tester</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

<div id="player" style="float: left">
<object id="myExperience1754261637001" class="BrightcoveExperience">
  <param name="bgcolor" value="#FFFFFF" />
  <param name="width" value="480" />
  <param name="height" value="270" />
  <param name="playerID" value="2549948545001" />
  <param name="playerKey" value="AQ~~,AAABmA9XpXk~,-Kp7jNgisreVadKjzdyJfLcfukyXcGqB" />
  <param name="isVid" value="true" />
  <param name="isUI" value="true" />
  <param name="dynamicStreaming" value="true" />
  <param name="includeAPI" value="true" />
  <param name="templateLoadHandler" value="myTemplateLoaded" />
  <param name="templateReadyHandler" value="onTemplateReady">
  <param name="@videoPlayer" value="1754261637001" />
</object>
<div>
<button id="changeVideo" onclick="changeVideo()">Change Video</button>
<div class="overlay_play_big">Play</div>
</div>
</div>
<script type="text/javascript">
brightcove.createExperiences();
</script>
<div id="log" style="float: left">
<div id="positionLog"></div>
<div id="eventLog"></div>
</div>
<script>
var myTemplateLoaded, onTemplateReady, player, modVP, modExp, modCon, previousVideoID=0, currentVideo, videosToSwap=new Array(1754261637001,1754261438001); //videos we will swap

myTemplateLoaded = function (experienceID) {
    player = brightcove.api.getExperience(experienceID);
    modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
    modExp = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
    modCon = player.getModule(brightcove.api.modules.APIModules.CONTENT);
}

onTemplateReady = function (evt) {
    modVP.getCurrentVideo(function (dto) {
    });
    modVP.addEventListener(brightcove.api.events.MediaEvent.BEGIN, onMediaEventFired);
    modVP.addEventListener(brightcove.api.events.MediaEvent.CHANGE, onMediaEventFired);
    modVP.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, onMediaEventFired);
    modVP.addEventListener(brightcove.api.events.MediaEvent.ERROR, onMediaEventFired);
    modVP.addEventListener(brightcove.api.events.MediaEvent.PLAY, onMediaEventFired);
    modVP.addEventListener(brightcove.api.events.MediaEvent.PROGRESS, onMediaProgressFired);
    modVP.addEventListener(brightcove.api.events.MediaEvent.STOP, onMediaEventFired);
}

function onMediaEventFired(evt) {
   document.getElementById("eventLog").innerHTML += "MEDIA EVENT: " + evt.type + " fired at position: " + evt.position + "<BR>";
   if (evt.type === "mediaComplete") {
       //changeVideo();
       alert('ended');
   }
}

function onMediaProgressFired(evt) {
   document.getElementById("positionLog").innerHTML = "CURRENT POSITION: " + evt.position;
}

function changeVideo() {
   modVP.getCurrentVideo(currentVideoCallback);
}

function currentVideoCallback(currentVideo) {
   document.getElementById("positionLog").innerHTML = "";
   document.getElementById("eventLog").innerHTML = "";

   if (currentVideo.id == videosToSwap[0]) {
      modVP.loadVideoByID(videosToSwap[1]);
   } else {
      modVP.loadVideoByID(videosToSwap[0]);
   }
}

$('.overlay_play_big').on('click',function(){
      modVP.play();
});

</script>

  </body>
</html>

【讨论】：

仍然不适合我，我将您的代码复制到了单独的 html 文档中，api 仍然无法正常工作，除了这个还有什么其他的吗？
K 您检查过哪个浏览器在线尝试（即放入 xampp 或 apache 服务器在 ie9、chrome、safari 中对我有用）...
好的，我刚刚发现了问题所在，它需要托管以防万一工作，我是从本地测试，tnx！