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" />

修改您的播放器必须加载智能播放器modVP.play（）;上班。此方案的解决方法（您隐藏并显示播放器的方法）是创建一个短的空白视频，没有任何音频将与您的页面一起加载到后台。然后动态传入您要播放的实际视频的视频ID。权衡是...在播放视频之前似乎有几秒钟的延迟。此外，页面上的css位置然后出现可以提供比显示/隐藏更一致的结果。取决于浏览器。

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

1 个答案: