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

この問題を解決する方法を知っている人はいますか?

4

1 に答える 1

2

ブライトコーブの既知の問題のドキュメントによると：

HTML5 プレーヤが (ライトボックスの実装のように) 最初に非表示になっている場合、ビデオの再生の試行はサイレント モードで失敗します。サイト運営者がライトボックスを何度も非表示にして表示する場合は、この問題を回避するために、display:none を使用する代わりに、ビューポートの外で非表示にするか、別の要素でカバーすることをお勧めします。

于 2013-08-19T19:44:30.047 に答える