サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

    プレーヤーのサイズ設定

    このトピックでは、ビデオのサイズを変更する方法と player iframeとembed_in_pageの実装を使用する。

    サイジングの考慮事項

    ビデオのサイズを変更する際に留意すべき重要な概念がXNUMXつあり、 player:

    • アスペクト比 - メディアの幅と高さのプロパティは、プレーヤーの作成時にcURL ステートメントで設定され、アスペクト比とも呼ばれる本質的なビデオの大きさを定義します。

    • Player サイズ– player CSSまたはHTMLコードで設定された幅と高さのプロパティは、 player。 サイズを変えると player、固有のビデオ寸法を使用して、コントロールを正しく配置します。

    アスペクト比を設定する

    ビデオのアスペクト比は、幅と高さの関係です。 従来のテレビでは、4：3のアスペクト比を使用し、ワイドスクリーンでは16：9のアスペクト比を使用します。

    作成すると playerを使用して、ビデオの幅と高さを指定できます Studio。 使用 Players の作成と管理 モジュール、 プレーヤー情報 の項目を検索します。

    サイジング - スタジオ - アスペクト比

    ビデオのアスペクト比は同じままで、 player コントロールは正しく配置されます player 応答してサイズを変更します。

    不正確な比率を使用する

    ビデオのサイズとは異なるメディアアスペクト比を指定すると、ビデオと player コントロールはビデオの上に配置されません。

    ここでは、640：480のアスペクト比を持つTigerビデオを使用しながら、それぞれメディアの幅と高さを4pxと3px（16：9アスペクト比）に設定します。

    不正確なアスペクト比

    正しい比率を使用する

    メディアの寸法がビデオの縦横比と一致する場合、レターボックスは表示されず、 player サイズを変更してもコントロールは正しく配置されたままです player.

    ここでは、メディアの幅と高さをTigerビデオと同じ640pxと360px（16：9縦横比）に設定します。

    正しい縦横比

    作成セッションプロセスで player サイズ

    のサイズを設定できます player 使用して Studio。 使用 Players の作成と管理 モジュール、 プレーヤー情報 の項目を検索します。

    サイズ剤 player スタジオで

    CSSを使用して、 player、次のセクションで詳しく説明します。

    iframeを使用する

    iframeの実装では、 player サイズは、 width と height の属性 iframe 要素。 これを行うにはいくつかの方法があります：

    • 属性を iframe 素子

    • CSSを iframe 素子

    • CSSと id 属性を使用する。

    属性を iframe 素子

    追加して設定する width と height 属性を iframe 要素。

    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Size the Player</title>
</head>

<body>
  <iframe src='https://players.brightcove.net/1752604059001/0711ceb1-07cf-430c-bd6f-951937e2c488_default/index.html'
    allowfullscreen webkitallowfullscreen mozallowfullscreen
    width="640" height="360"></iframe>

</body>
</html>

    CSSを iframe 素子

    CSSでは、 width と height の属性 iframe 要素。

    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Size the Player</title>

  <!-- Page styles -->
  <style>
    iframe {
      width: 640px;
      height: 360px;
    }
  </style>
</head>

<body>
  <iframe src='https://players.brightcove.net/1752604059001/0711ceb1-07cf-430c-bd6f-951937e2c488_default/index.html'
    allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

</body>
</html>

    CSSと id 属性を使用する。

    CSSでは、 id に追加 iframe 素子。 この方法は複数ある場合に便利です iframe 要素をページに追加します。

    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Size the Player</title>

  <!-- Page styles -->
  <style>
    #myPlayer {
      width: 640px;
      height: 360px;
    }
  </style>
</head>

<body>
  <iframe id="myPlayer"
    src='https://players.brightcove.net/1752604059001/0711ceb1-07cf-430c-bd6f-951937e2c488_default/index.html'
    allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

</body>
</html>

    embed_in_pageを使用する

    embed_in_page実装の場合、 player サイズは、 width および video 要素。 これを行うにはいくつかの方法があります：

    • 属性を video 素子
    • class属性でCSSを使用する
    • CSSと id 属性を使用する。

    属性を video 素子

    追加して設定する width と height 属性を video 要素。

    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Size the Player</title>
</head>

<body>

  <video-js
    data-account="1752604059001"
    data-player="860a1ffd-4be3-4df6-9d46-c0621534108b"
    data-embed="default"
    class="video-js" controls
    width="640" height="360"></video-js>

  <script src="https://players.brightcove.net/1752604059001/860a1ffd-4be3-4df6-9d46-c0621534108b_default/index.min.js"></script>

</body>
</html>

    class属性でCSSを使用する

    video 要素には、CSSから参照して、 player サイズ。

    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Size the Player</title>

  <!-- Page styles -->
  <style>
    .video-js {
      width: 640px;
      height: 360px;
    }
  </style>
</head>

<body>
  <video-js
    data-account="1752604059001"
    data-player="0711ceb1-07cf-430c-bd6f-951937e2c488"
    data-embed="default"
    class="video-js" controls></video-js>

  <script src="https://players.brightcove.net/1752604059001/0711ceb1-07cf-430c-bd6f-951937e2c488_default/index.min.js"></script>

</body>
</html>

    CSSと id 属性を使用する。

    CSSでは、 id に追加 video 素子。 この方法は複数ある場合に便利です video 要素をページに追加します。

    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Size the Player</title>

  <!-- Page styles -->
  <style>
    #video_1 {
      width: 640px;
      height: 360px;
    }
  </style>
</head>

<body>

  <video-js id="video_1"
    data-account="1752604059001"
    data-player="860a1ffd-4be3-4df6-9d46-c0621534108b"
    data-embed="default"
    class="video-js" controls></video-js>

  <script src="https://players.brightcove.net/1752604059001/860a1ffd-4be3-4df6-9d46-c0621534108b_default/index.min.js"></script>

</body>
</html>

    パーセンテージの使用

    使用している場合 height および width の属性 Brightcove Player's iframe or video タグでは、これらの属性はピクセル単位で測定されます のみ。 実際には、あなたの height と width 属性（ px、技術的には無効なHTMLです）：

    width="480"

    パーセンテージを使用することができます。これは、CSSを使用して2つの異なる方法で達成できます。

    • 使い方 style の属性 video タグ。 
      <video-js data-video-id="5622718636001"
  data-account="1507807800001"
  data-player="default"
  data-embed="default"
  data-application-id
  class="video-js"
  controls
  style="width: 100%;height: 100%"></video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
    • 使い方 style タグ。 
      ...
<style>
    .video-js {
      height: 100%;
      width: 100%;
    }
</style>
...
<video-js data-account="1752604059001"
  data-player="H1xW7NWcz"
  data-embed="default"
  data-application-id
  class="video-js"
  controls></video-js>
<script src="https://players.brightcove.net/1752604059001/H1xW7NWcz_default/index.min.js"></script>

    全画面表示

    フルスクリーンAPIをサポートする新しいブラウザでは、ページ内CSSルールを適用して、 player フルスクリーンに切り替えると、100％にスケーリングされます。 そうでなければ、 player 全画面表示では元のサイズで表示されます。

    次のCSSを使用して、 player 全画面モードのときに拡大縮小します。

    /***************************
* Fullscreen display      *
***************************/
body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
}
.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}
.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}

    優先順位

    あなたは、サイズを決めるいくつかの方法を見てきました player。 以下は優先順位のリストです。

    • ランタイムの変更（JavaScriptを使用して変更する player サイズ）
    • <video-js>タグで設定されたサイズ
    • CSS（継承の通常の規則に従う）
    • Player 構成設定

    サイズ Player API

    4あり player のメソッド Player API ピクセル単位でサイズを返しますが、それらの違いを理解することが重要です。

    • .height() - で設定された高さを返します。 height の属性 video タグ（その属性が設定されていない場合は、 height() 0を返します）
    • .width() - で設定された幅を返します。 width の属性 video タグ（その属性が設定されていない場合は、 width() 0を返します）
    • .currentHeight() -の現在の高さを返します player、しかしそれは設定されました
    • .currentWidth() -現在の幅を返します player、しかしそれは設定されました

    ほとんどの場合、 currentHeight() と currentWidth() あなたが使いたいメソッドです。

    ページの最終更新日：28年2020月XNUMX日