3

我正在开发一个应该在下周推出的网站。我正在努力解决 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 是否为真。如果是这样，请添加类以显示容器。加载播放器，一旦模板就绪触发删除类以再次隐藏它。

现在播放器再次在桌面上无缝地以模式和嵌入页面的内联方式工作。

在 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 );
    }
  }

有谁知道如何解决此问题或知道可能导致此问题的原因？

4

1 回答 1

2

根据 Brightcove已知问题文档：

如果 HTML5 播放器最初是隐藏的（如在灯箱实现中）尝试播放视频将静默失败。如果发布者打算多次隐藏和显示他们的灯箱，我们建议将其隐藏在视口之外或用另一个元素覆盖它，而不是使用 display:none 来避免此问题。

于 2013-08-19T19:44:30.047 回答