Brightcove Player レスポンシブにサイズ変更する

このトピックでは、レスポンシブビデオを作成する方法を学びます player 画面のサイズに基づいてサイズが変更されます。

賃貸システムの概要

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

ビデオを埋め込むとき player ページでは、ブラウザウィンドウでサイズが変更されないことがわかります。これは、デフォルトでビデオが player 幅と高さが固定されているため、ブラウザの変更に応答できません。レスポンシブWebデザインのXNUMXつの側面は、ページ内の要素がさまざまな画面サイズに適切に適応するようにすることです。

player

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

使い方

次のセクションでは、 player 例で使用されているHTMLコード。

レスポンシブを作成する player

手動でHTMLを追加できますが player コードを埋め込んでレスポンシブを作成する player、最も簡単な方法は、 Players の作成と管理 のモジュール Studio.

次の手順に従ってレスポンシブを作成します player:

の中に Players の作成と管理 モジュール、新しい player または既存のものを使用して、 player プロパティを編集する名前。
動画内で プレーヤー情報 の項目を検索します。
をセットする サイジング プロパティへ 敏感な.

レスキューサイズ設定
オプション：幅のプロパティ Player 寸法 設定。レスポンシブ player、これはの最大幅を設定します player.
ナビゲーションヘッダーの保存.
公開するには player、クリック 公開と埋め込み>変更の公開.
開いているダイアログを閉じるには、 閉じる.
の中に メディア モジュール、ビデオを選択し、これで公開します player.ビデオコンテンツを player そしてそれを公開します。

また、 サイジング プロパティへ 敏感な あなたがビデオを公開したときに メディア モジュールを開きます。
標準（iframe）または拡張（インページ）埋め込みコードをコピーし、新しいHTMLファイルに貼り付けます。

player 埋め込みコード

標準（iframe）埋め込みコードをHTMLページにコピーすると、 player 二つに包まれています <div> コンテナ。コードは次のようになります。

1〜10行目：で動画を公開するときにコピーした埋め込みコードです player.
1行目：の最大幅を設定する外部コンテナを定義します player。デフォルトは100％に設定されています。で幅を設定した場合 Studio、あなたの player 最大幅サイズまで反応します。
Line 2：内在比を使用して高さを設定し、正しい縦横比を維持する内部コンテナを定義します。詳細については、固有比率の理解の項目を検索します。
3〜8行目： player iframe実装のコード。 3行目には style 配置する属性 player 親コンテナを埋めます。これにより、 player ブラウザのサイズが変わると、サイズが変わります。

<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> ビデオの周りのコンテナ player 設定して padding-top ビデオの目的のアスペクト比を持つプロパティ。

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

縦横比は単純な計算によって決定され、パーセンテージが決定されます。たとえば、16：9のアスペクト比を持つビデオの割合は、9を16（つまり9 / 16 = .5625）で割って56.25％を求めます。 16：9ビデオでは、高さを幅の9 / 16thsにします。

流体モードを使用する

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

対応クラスには次のものが含まれます：

CLASS	デフォルト	アスペクト比
`vjs-fluid`	はい	2.4：1
`vjs-16-9`	いいえ	16：9
`vjs-4-3`	いいえ	4：3

上記の流体クラスは、レスポンシブサイジングを player。彼らは、 padding-top 属性を video 要素。

レスポンシブを作成するには player これはブラウザを満たし、流体クラスのXNUMXつを player 埋め込みコード。たとえば、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>

あなたの最大サイズを設定したい場合 player、単に div 埋め込みコードの周囲にコンテナを置き、 max-width or max-height 属性。たとえば、このコードは、 player 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>