На изображении щелкните скрыть изображение и воспроизвести видео Brightcove.

Я пытаюсь скрыть изображение при нажатии и отобразить видео 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.
});

Я не уверен, как заставить видео воспроизводиться после его отображения.


person Mdd    schedule 21.01.2014    source источник


Ответы (1)


Вы пытались просто добавить это? <param name="autoStart" value="true" />

EDIT: Ваш плеер должен быть загружен для смарт-плеера modVP.play(); работать. Обходной путь для этого сценария (где вы скрываете и показываете проигрыватель) — создать короткое пустое видео без звука, которое будет загружаться в фоновом режиме вместе с вашей страницей. Затем динамически передайте идентификатор видео фактического видео, которое вы хотите воспроизвести. Компромисс в том, что... будет казаться, что перед воспроизведением вашего видео есть задержка в несколько секунд. Кроме того, позиция css за пределами страницы, а затем появление может обеспечить более согласованные результаты, чем отображение/скрытие. Зависит от браузеров.

person Par6    schedule 01.03.2014