Brightcove Begin Playing When Div Made Visible

Question

У меня есть страница, которая в конечном итоге будет содержать несколько видеороликов. Когда щелкнет изображение закладок, заполнитель скроется, видео покажет и начнет воспроизведение.

Я могу получить все, кроме игры. Я должен вручную щелкнуть кнопку воспроизведения, как только видео будет видно, чего я не хочу.

Я продолжаю получать ошибки относительно того, что игрок имеет значение null или undefined. Я попытался примеры, найденные здесь и на опорном разработчиков Brightcove, но безрезультатно:

Ниже мой код (ID Сменился с 00000000s в целях безопасности):

<div class="video-container"> 
    <a href="#" class="video-placeholder" data-brightcove-id="00000000"><img src="/media/video-placeholders/myplaceholder.png' class='video-placeholder-photo"><span class="video-placeholder-icon"><i class="material-icons">&#xE038;</i></span></a> 
    <div class="video-player" style="display: block;"> 
      <div id="player" style="display:none"> 
      </div> 
      <script language="JavaScript" type="text/javascript" src="https://sadmin.brightcove.com/js/BrightcoveExperiences.js"></script> 
      <object id="player-object" class="BrightcoveExperience"> 
       <param name="width" value="100%" /> 
       <param name="height" value="100%" /> 
       <param name="bgcolor" value="#FFFFFF" /> 
       <param name="playerID" value="00000000" /> 
       <param name="playerKey" value="00000000" /> 
       <param name="isVid" value="true" /> 
       <param name="isUI" 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="00000000" id="video-player-param" /> 
       <param name="autoStart" value="false" /> 
       <param name="secureConnections" value="true" /> 
       <param name="secureHTMLConnections" value="true" /> 
      </object> 
    </div> 
</div> 
<script type="text/javascript" src="https://sadmin.brightcove.com/js/BrightcoveExperiences.js"></script> 
<script type="text/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); 
     }; 

    $('document').ready(function() { 
     $('.video-placeholder').click(function(e) { 
      e.stopImmediatePropagation(); 
      //$('.video-placeholder').show(); 
      //$('.video-player').hide(); 
      //$(this).parent().children('.video-placeholder').hide(); 
      //$(this).parent().children('.video-player').show(); 
      modVP.play(); 
      return false; 
     }) 
     }); 
</script> 

Answer 1

Попробуйте console.log (modVP) в вашем обработчике кликов, чтобы гарантировать, что он содержит объект, который вы ожидаете. Похоже, что modVP не является игровым объектом со связанной с ним функцией воспроизведения.

Посмотрите также видеоjs(). Это звучит лучше для вас. http://docs.brightcove.com/en/perform/brightcove-player/samples/load-player-dynamically.html Использование плеера api и videojs() можно найти http://docs.brightcove.com/en/perform/brightcove-player/reference/api/player.html

Кроме того, это поможет обновить ваш вопрос, включив в него ошибку javascript.

Answer 2

Вы определяете функцию, которая будет работать на игрока нагрузки, onTemplateLoaded:

<param name="templateLoadHandler" value="onTemplateLoaded" /> 

Однако ваша функция называется onTemplateLoad:

var onTemplateLoad = function (experienceID) {... 

У modVP никогда не будет определен.