Brightcove Smart Player не показывает видео на iPad и iPhone, если оно в модальном режиме (скрыто и показано с помощью Javascript)

Question

Я работаю над сайтом, который должен появиться на следующей неделе. Я борюсь с проблемой с API-интерфейсом умного плеера Brightcove для iPhone и iPad, особенно если он модальный. Я использую очень простой пользовательский скин, устанавливающий значки и цвета в BEML. Я использую плеер встроенный и модальный. В обоих случаях код игрока находится на странице по умолчанию. В случае с модалом контейнер скрыт с помощью CSS.

Вот мой текущий код, используемый для модального:

<section class="fullscreen-container modal template-modal">
  <div class="fullscreen-interior fullscreen-interior-video">
    <script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
      <object id="myExperience" class="BrightcoveExperience">
        <param name="bgcolor" value="#000000" />
        <param name="width" value="602" />
        <param name="height" value="451" />
        <param name="playerID" value="XXXXXXXXXXXX" />
        <param name="playerKey" value="XXXXXXXXXXXX" />
        <param name="isVid" value="true" />
        <param name="isUI" value="true" />
        <param name="dynamicStreaming" value="true" />
        <param name="includeAPI" value="true" />
        <param name="templateLoadHandler" value="onTemplateLoad" />
        <param name="templateReadyHandler" value="onTemplateReady" />
      </object>
      <script type="text/javascript">
      if(!Modernizr.touch) {
        brightcove.createExperiences();
      } else {
        $('.template-modal').addClass('template-modal-is-loading');
        brightcove.createExperiences();
      }
    </script>
    <script language="JavaScript" type="text/javascript">
      var player, modVP, expMod;
      function onTemplateLoad(experienceID) {
        player = brightcove.api.getExperience(experienceID);
      }
      function onTemplateReady() {
        modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
        if(Modernizr.touch) {
          setTimeout( function(){ 
             $('.template-modal-is-loading').removeClass('template-modal-is-loading'); 
          },500);
        }
      }
    </script> 
  </div>
  <button class="close-button">
    <span aria-hidden="true" data-icon="&#xe00e"></span>
  </button>
</section>

Сначала плеер не будет отображаться на iPad. Это будет отображаться на iPhone только после поворота устройства и изменения ориентации. После этого появится миниатюра с кнопкой воспроизведения сверху. Если щелкнуть миниатюру видео, можно будет воспроизвести видео, перейти к экрану, и работа будет отлично воспроизводиться.

После проверки содержимого iframe, который генерируется умным плеером на iPad, выяснилось, что все внутренние элементы были установлены на 0x0. Затем я устанавливаю класс для контейнера, который заставляет его показываться, а затем удаляется в обработчике готовности шаблона.

  function onTemplateReady() {
    modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
    $('.template-modal-is-loading').removeClass('template-modal-is-loading');
  }

После добавления этого кода умный плеер в модале больше не работал на рабочем столе. (Это больше не будет загружаться вообще. Плеер не появится.)

Затем я добавил условные выражения, чтобы проверить, является ли Modernizr.touch верным. Если это так, добавьте класс, чтобы показать контейнер. Загрузите плеер, и как только шаблон будет готов, удалите класс, чтобы скрыть его снова.

Теперь проигрыватель снова работает на рабочем столе без проблем, как в модальном, так и встраиваемом режиме на странице.

На iPhone он все равно не будет отображаться, пока я не поверну устройство и воспроизведение видео больше не будет работать вообще. При нажатии на миниатюру и кнопку воспроизведения миниатюра удаляется, и проигрыватель остается черным.

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

Это код, который вызывается, затем открывается модальное окно:

  waitForModVp = function () {
    if( typeof modVP == 'object' ) {
      modVP.loadVideoByReferenceID(newSrc);
      $(window).on('resize.size-video', function(){
        expMod = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
        var width = window.innerWidth*0.8,
        height = (window.innerWidth*0.8)*0.7491694352;
        if (width < 610) {
          expMod.setSize(width, height);
          $('.fullscreen-interior-video').css({
            'width' : width+'px',
            'height' : height+'px'
          });
        }
      })
      //For analytics
      //countViewUrl = ( evt.triggeredReference.closest('[data-countview-url]').attr('data-countview-url') );
      //$.get(countViewUrl);
    } else {
      window.setTimeout( waitForModVp, 250 );
    }
  }

Кто-нибудь знает, как решить эту проблему или иметь представление о том, что может быть причиной этого?

Answer 1

Согласно документации Brightcove Известные проблемы:

Если проигрыватель HTML5 изначально скрыт (как в реализации лайтбокса), попытки воспроизвести видео будут молча терпеть неудачу. Если издатель намеревается скрыть и показать свой лайтбокс несколько раз, мы рекомендуем скрывать его за пределами области просмотра или закрывать его другим элементом вместо использования display: none, чтобы избежать этой проблемы.