iphone - Brightcove 智能播放器不会在 iPad 和 iPhone 上显示处于模式中的视频(使用 Javascript 隐藏和显示)

Question

我正在开发一个网站，预计下周推出。我正在努力解决 iPhone 和 iPad 上的 Brightcove 智能播放器 api 的问题，特别是在模式中。我正在使用一个非常简单的自定义皮肤，在 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 上。之后会出现缩略图，其顶部带有播放按钮。单击视频缩略图将播放视频，它将占据屏幕，并且可以完美播放。

检查iPad上智能播放器生成的iframe的内容后，发现所有内部元素都设置为0x0。然后，我在容器上设置一个类，强制显示它，然后在模板就绪处理程序中将其删除。

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

添加此代码后，模式中的智能播放器不再在桌面上运行。 (它将不再加载。播放器将不会出现。)

然后我添加了条件来检查 Modernizr.touch 是否为 true。如果是这样，添加类以显示容器。加载播放器，一旦模板准备就绪，就删除该类以再次隐藏它。

现在，播放器可以再次在桌面上以模态和页面内嵌方式无缝运行。

在 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 Known-Issues文档:

If an HTML5 player is initially hidden (as in a lightbox implementation) attempts to play videos will fail silently. If the publisher intends to hide and show their lightbox multiple times, we recommend hiding it outside the viewport or covering it with another element instead of using display:none to avoid this issue.