Question

我正在尝试播放视频点击视频并在视频播放时隐藏它，到目前为止，我有一个这样的结构：

<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，但即使这个简单的警报也行不通。视频结束，没有任何反应。我怎么能这样做，或者我犯了错误？

Answer 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>

触发Brightcove视频播放图像点击并在视频完成后隐藏它

1 个答案: