Question

我正在构建视频数据库并使用Brightcove作为我的视频提供商。我的数据库返回一个视频ID列表，在选择时，该视频应加载到div中并开始播放。

到目前为止，我有这个：

http://bigreviewtv.byteserve.com.au/bcgal2.html

<HTML>
<HEAD>

 <script src="/jquery/jquery-1.7.1.min.js"></script>

 <script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences_all.js"></script>
 <script>
 newVideo = function(videoId) {
         var newhtml = [
       '<object id="myExperience', videoId, '" class="BrightcoveExperience">'
       , '<param name="bgcolor"          value="#FFFFFF" />'
       , '<param name="width"            value="480" />'
       , '<param name="height"           value="270" />'
       , '<param name="playerKey"        value="AQ~~,AAACP3r8R8k~,kFpRRbL5Evyu4ko-Z7yiuqqeHKzo4hSs" />'
       , '<param name="playerID"         value="2472217790001" />'
       , '<param name="isVid"            value="true" />'
       , '<param name="isUI"             value="true" />'    
       , '<param name="@videoPlayer"     value="' + videoId + '" />'
       , '<param name="dynamicStreaming" value="true" />'    
     , '</object>'
     ];
     //return $(newhtml.join('')).appendTo('#hero');
     //$("#hero").html(newhtml.join(''));
     //alert(newhtml.join(''));

     brightcove.createExperiences();
   };



 </script>

 </HEAD>
 <BODY>

 <div id="hero" style="border:1px red dotted">

 <object id="myExperience2472866007001" class="BrightcoveExperience">
   <param name="bgcolor" value="#FFFFFF" />
   <param name="width" value="480" />
   <param name="height" value="270" />
   <param name="playerID" value="2472217790001" />
   <param name="playerKey" value="AQ~~,AAACP3r8R8k~,kFpRRbL5Evyu4ko-Z7yiuqqeHKzo4hSs" />
   <param name="isVid" value="true" />
   <param name="isUI" value="true" />
   <param name="dynamicStreaming" value="true" />
   <param name="@videoPlayer" value="2472866007001" />
 </object>

 </div>



<div id="video-gallery">
  <div id="video-full"></div>
  <ul id="video-thumbs">
 <li><a href="javascript:newVideo('2472862365001')">Video 1</a></li>
  <li><a href="javascript:newVideo(2472940937001)">Video 2</a></li>
  <li><a href="javascript:newVideo(2472916922001)">Video 3</a></li>
  </ul>
</div><!-- /#video-gallery -->


</BODY>
</HTML>


<script type="text/javascript">brightcove.createExperiences();</script>

不幸的是，它没有按预期工作。任何帮助将不胜感激。

Answer 1

您最好使用Brightcove API中的loadVideoByID（）方法 - http://docs.brightcove.com/en/video-cloud/smart-player-api/reference/symbols/brightcove.api.modules.VideoPlayerModule.html#loadVideoByID

以下是一个例子：

<object id="myExperience921449663001" class="BrightcoveExperience">
    <param name="bgcolor" value="#FFFFFF" />
    <param name="width" value="480" />
    <param name="height" value="270" />
    <param name="playerID" value="2079935931001" />
    <param name="playerKey" value="AQ~~,AAAA1oy1bvE~,ALl2ezBj3WE0z3yX6Xw29sdCvkH5GCJv" />
    <param name="isVid" value="true" />
    <param name="isUI" value="true" />
    <param name="dynamicStreaming" value="true" />
    <param name="@videoPlayer" value="921449663001" />

    <param name="includeAPI" value="true" />
    <param name="templateLoadHandler" value="onTemplateLoad" />
    <param name="templateReadyHandler" value="onTemplateReady" />
</object>
<script type="text/javascript">
brightcove.createExperiences();

function onTemplateLoad(experienceID) {
    player = brightcove.api.getExperience(experienceID);
    APIModules = brightcove.api.modules.APIModules;
}

function onTemplateReady(evt) {
    videoPlayer = player.getModule(APIModules.VIDEO_PLAYER);
}
</script>
<ul>
    <li><a href="javascript:videoPlayer.loadVideoByID(928199562001)">928199562001</a></li>
    <li><a href="javascript:videoPlayer.loadVideoByID(1325817301001)">1325817301001</a></li>
    <li><a href="javascript:videoPlayer.loadVideoByID(1187545001001)">1187545001001</a></li>
</ul>

您需要更改playerID，playerKey，@ videoPlayer和videoID以适应您的环境。

有些文章和示例代码介绍了如何在http://docs.brightcove.com/en/video-cloud/smart-player-api/samples/fetch-playlists.html和http://support.brightcove.com/en/video-cloud/docs/dynamically-loading-videos-using-smart-player-api

中执行此操作

Brightcove视频库

1 个答案: