2

画像クリックでビデオを再生し、ビデオが終了したら非表示にしようとしていますが、これまでのところ、次のような構造になっています。

<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_bigdivのクリックでビデオ再生をトリガーしたい。Brightcove API を使用していますが、この単純なアラートでさえ機能しません。ビデオは終了し、何も起こりません。どうすればこれを行うことができますか、それとも間違っていますか?

4

1 に答える 1

3

この以下のコードは期待どおりに動作します..

<!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>
于 2013-10-28T12:43:09.550 に答える