iOS と Brightcove Player

動画の自動再生

不要なセグメントがダウンロードされる懸念が問題にならない場合、動画を自動再生できます。自動再生を実現するには、次の操作が必要です。

• autoplay 属性を追加します。iframe 埋め込みコードでは、この属性を true に設定します。
• playsinline 属性を追加します。iframe 埋め込みコードでは、この属性を true に設定します。
• muted 属性を追加します。iframe 埋め込みコードでは、この属性を true に設定します。または、音声トラックのない動画を使用することもできます。

Videoタグ埋め込みコードの実装例:

      <video-js data-video-id="5045678908001"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        data-application-id
        autoplay playsinline muted
        controls></video-js>
      <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

iframe 埋め込みコードの実装例:

      <iframe src="https://players.brightcove.net/1752604059001/default_default/index.html?
        videoId=5811862231001&autoplay=true&muted=true&playsinline=true"
        allowfullscreen
        allow="encrypted-media"></iframe>

自動再生の詳細については、自動再生に関する考慮事項 ドキュメントを参照してください。

フルスクリーン以外で動画を再生する

動画をフルスクリーンではなくインラインで再生するには、次の操作が必要です。

• playsinline 属性を true に設定します。

iOS 10 以降では、playsinline 属性により Brightcove Player はフルスクリーンを強制せずに再生を開始できます。視聴者が埋め込まれた動画を再生しても、自動的にフルスクリーンにはなりません。これは iOS のデフォルト動作です。

視聴者が動画の再生を開始し、その後フルスクリーンに切り替えても、動画の再生は中断されません。

動画をフルスクリーンで再生する

ユーザーがインライン再生からフルスクリーン モードに切り替えると、次の場合を除き、Brightcove Player ではなく iOS ネイティブプレーヤーが使用されます。

• iOS 12 上の Safari 12 を使用している iPad — この場合は Brightcove Player が自動的に使用されます。

ネイティブ プレーヤーを使用すると、デバイス画面全体を活用できます。ただし Brightcove Player のコントロールが使用されなくなるため、一部の機能が失われる可能性があります。iOS デバイスに対してのみフルスクリーンを許可しないようにしたい場合は、次のコードを使用できます。

      <script>
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this,
            fullScreenElement = document.getElementsByClassName("vjs-fullscreen-control")[0];
          if (videojs.browser.IS_IOS ) {
            fullScreenElement.parentNode.removeChild(fullScreenElement);
          }
        });
      </script>

不要なセグメントのダウンロードを防ぐ

iOS が不要なセグメントをダウンロードし、過剰な帯域幅使用を引き起こす可能性があります。特に autoplay が有効な場合、preload を none に設定していてもセグメントはダウンロードされます。これを回避する唯一の方法は、autoplay 属性を使用しないことです。