在图像上，单击隐藏图像并播放Brightcove视频

Question

我试图在单击上隐藏图像并显示BrightCove视频。显示视频后，我将无法播放视频。

这是我与以下示例创建的小提琴：http：//jsfiddle.net/u9yvv/

这是我的HTML和JavaScript：

<div class="js-container container">
  <div class="content">
    <div class="figure">
        <img src="http://placekitten.com/200/100" alt="Image of a kitten" />
    </div>
    <a href="#" class="js-trigger trigger">View Video</a>
  </div>
  <!-- Start of Brightcove Player -->
  <object id="myExperience921449663001" class="BrightcoveExperience">
    <param name="bgcolor" value="#FFFFFF" />
    <param name="width" value="100%" />
    <param name="height" value="auto" />
    <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" />
    <!-- smart player api params -->
    <param name="includeAPI" value="true" />
    <param name="templateLoadHandler" value="onTemplateLoad" />
    <param name="templateReadyHandler" value="onTemplateReady" />
  </object>
  <script type="text/javascript">brightcove.createExperiences();</script>
</div>

javaScript：

var player,
    modVP;
var onTemplateLoad = function (experienceID) {
  // get references to the player and API Modules and Events
  console.log('onTemplateLoad has loaded');
  player = brightcove.api.getExperience(experienceID);
  modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
};
// template ready event handler
var onTemplateReady = function (evt) {
  console.log('onTemplateReady is ready');
  modVP.addEventListener(brightcove.api.events.MediaEvent.PLAY, onMediaEventFired);
};
$('.js-trigger').on('click', function(event) {
  //event.preventDefault();
  $('.content').css({ 'display' : 'none'}); 
  $('.BrightcoveExperience').css({ 'position' : 'static'});
  modVP.play(); //I thought this would make the video play.
});

我不确定显示视频后如何播放。

Answer 1

您是否尝试过只是添加此内容？ <param name="autoStart" value="true" />

编辑：您的播放器必须为Smart Player Modvp.play（）加载;上班。这种情况的解决方法（您正在隐藏并显示播放器的地方）是创建一个空白视频，而没有任何音频，这些视频将在您的页面中加载。然后动态传递您要播放的实际视频的视频ID。折衷的是...似乎在播放视频之前有几秒钟的延迟。同样，与显示/隐藏相比，CSS位置在页面上，然后出现可能会提供更多一致的结果。取决于浏览器。