Brightcove Playerレスポンシブサイジング

Brightcove Playerのレスポンシブサイズこのトピックでは、画面のサイズに基づいてサイズを変更するレスポンシブビデオプレーヤーを作成する方法を学習します。

はじめに

レスポンシブサイジングとは、アスペクト比を維持しながら、バウンディングウィンドウのサイズの変更に応じてプレーヤーのサイズを変更し、ビデオがレターボックス化されないようにすることを意味します（下の画像を参照）。

ページにビデオプレーヤーを埋め込むと、ブラウザウィンドウでサイズが変更されないことがわかります。これは、デフォルトでは、ビデオプレーヤーには固定幅と高さが与えられ、ブラウザの変更に応答できないために発生します。レスポンシブウェブデザインの1つの側面は、ページ内の要素がさまざまな画面サイズに適切に適応することを保証することです。

プレイヤーは

ブラウザーのサイズを変更して、ビデオのアスペクト比を維持しながらビデオプレーヤーのサイズを変更します。ビデオの周りに文字ボックスが表示されるべきではありません。このドキュメントページには、コンテンツの幅の最大値があることに注意してください。

それはどのように動作するか

以下のセクションでは、この例で使用されている HTML コードと、プレーヤーについて説明します。

レスポンシブプレーヤーを作成する

プレーヤーの埋め込みコードに HTML を手動で追加してレスポンシブプレーヤーを作成できますが、最も簡単な方法は Studio で Players モジュールを使用することです。

レスポンシブプレーヤーを作成するには、次の手順に従います。

Players モジュールで、新しいプレーヤーを作成するか、既存のプレーヤーを使用してプレーヤー名をクリックしてプロパティを編集します。
[ プレイヤー情報 ] セクションを見つけます。
をセットするサイジングプロパティにレスポンシブ。

レスポンシブサイズ設定
オプション:[ プレーヤーの寸法] 設定で [ 幅] プロパティを追加できます。レスポンシブプレーヤーの場合、これはプレーヤーの最大幅を設定します。
[ 保存] をクリックします。
プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
開くダイアログを閉じるには、[ 閉じる] をクリックします。
メディアモジュールで、ビデオを選択し、このプレーヤーで公開します。動画コンテンツをプレーヤーに割り当てて公開します。

Media モジュールからビデオを公開するときに、Sizing プロパティを Responsiby に設定することもできます。

メディアモジュールの公開
標準（iframe）または詳細（ページ内）の埋め込みコードをコピーして、新しいHTMLファイルに貼り付けます。

プレーヤーの埋め込みコード

標準 (iframe) 埋め込みコードを HTML ページにコピーすると、プレーヤーが 2 <div> つのコンテナでラップされていることに注意してください。コードは次のようなものになります。

1 ～ 10 行目は次のとおりです。プレーヤーでビデオを公開するときにコピーした埋め込みコードです。
1 行目:プレーヤーの最大幅を設定する外側のコンテナを定義します。デフォルトは 100% に設定されています。Studioで幅を設定した場合、プレーヤーは最大幅サイズまで応答します。
2行目:固有比を使用して高さを設定し、正しいアスペクト比を維持する内部コンテナを定義します。詳細については、「固有比率を理解する」セクションを参照してください。
3～8行目:iframe 実装用のプレーヤーコードが含まれています。3 行目には、style 親コンテナを埋めるためにプレーヤーを配置する属性があることに注意してください。これにより、ブラウザのサイズが変わるにつれて、プレーヤーはサイズを変更できます。

<div style="position: relative; display: block; max-width: 100%;">
  <div style="padding-top: 56.25%;">
    <iframe src="https://players.brightcove.net/1752604059001/default_default/index.html?videoId=5802784116001"
      allowfullscreen
      webkitallowfullscreen
      mozallowfullscreen
      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

iframe の例

標準 (iframe) 埋め込みコードを HTML ページにコピーすると、コードは次のようになります。

<div style="position: relative; display: block; max-width: 640px;">
  <div style="padding-top: 56.25%;">
    <iframe src="https://players.brightcove.net/1752604059001/default_default/index.html?videoId=5802784116001"
      allowfullscreen
      webkitallowfullscreen
      mozallowfullscreen
      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

<div style="position: relative; display: block; max-width: 640px;">
  <div style="padding-top: 56.25%;">
    <iframe src="https://players.brightcove.net/1752604059001/VyqgG8mql_default/index.html"
      allowfullscreen
      webkitallowfullscreen
      mozallowfullscreen
      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

ページ内埋め込みの例

詳細設定 (ページ内) 埋め込みコードを HTML ページにコピーすると、コードは次のようになります。

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
<title>Responsive Brightcove Player</title>

</head>

<body>
<div style="position: relative; display: block; max-width: 640px;">
  <div style="padding-top: 56.25%;">
    <video-js data-video-id="5802784116001"
      data-account="1752604059001"
      data-player="default"
      data-embed="default"
      data-application-id
      class="video-js"
      controls
      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></video-js>
    <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
  </div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
<title>Responsive Brightcove Player</title>

</head>

<body>
<div style="position: relative; display: block; max-width: 640px;">
<div style="padding-top: 56.25%;">
  <video-js
    data-account="1752604059001"
    data-player="VyqgG8mql"
    data-embed="default"
    data-application-id
    class="video-js"
    controls
    style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></video-js>
  <script src="https://players.brightcove.net/1752604059001/VyqgG8mql_default/index.min.js"></script>
</div>
</div>

</body>
</html>

固有比の理解

このソリューションでは、本質的な比率を使用しました。これは CSS 技術であり、子要素を親要素で設定した比率に流動的に拘束します。これを行うには、<div> ビデオプレーヤーの周りにコンテナを追加し、padding-top ビデオの所望のアスペクト比でプロパティを設定します。

パディングプロパティは、固有の比率でボックスをスタイルするマジックです。これは、padding プロパティが、包含ブロックの幅のパーセンテージとして設定されているためです。paddingスタイルは主要なブラウザすべてでサポートされるため、これはうまく機能します。

アスペクト比は、パーセンテージを決定するための簡単な計算によって決定されます。たとえば、アスペクト比 16:9 のビデオの割合を 9 を 16 (つまり 9/16 = .5625) で割って 56.25% を計算します。16:9 のビデオの場合、高さは幅の 9/16 にします。

流体モードの使用

Video.js ライブラリ v5.0.0+ は、単純な応答クラスをサポートするように更新されました。これらのクラスは、詳細設定（ページ内）埋め込みコードを使用する場合、Brightcove Player でサポートされます。

レスポンシブクラスには、次のものがあります。

クラス	デフォルト	アスペクト比
`vjs-fluid`	はい	2. 4:1
`vjs-16-9`	いいえ	16:9
`vjs-4-3`	いいえ	4:3

上記の流体クラスは、プレーヤーにレスポンシブサイジングを適用します。これは、padding-topvideoエレメントに属性を適用することで実現されます。

ブラウザーを満たすレスポンシブプレーヤーを作成するには、いずれかの流体クラスをプレーヤーの埋め込みコードに追加します。たとえば、16:9 のアスペクト比を使用するには、コードは次のようになります。

<video-js data-video-id="5802784116001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id
  class="video-js vjs-16-9"
  controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

プレーヤーの最大サイズを設定する場合は、div埋め込みコードの周りにコンテナを追加しmax-width、max-height属性です。たとえば、次のコードは、プレーヤーのサイズを 640px に制限します。

<div style="max-width: 640px;">
  <video-js data-video-id="5802784116001"
    data-account="1752604059001"
    data-player="default"
    data-embed="default"
    data-application-id
    class="video-js vjs-16-9"
    controls></video-js>
  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
</div>