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

    プレーヤーのサイズ設定

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

    サイジングの考慮事項

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

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

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

    アスペクト比を設定する

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

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

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

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

    不正確な比率を使用する

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

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

    不正確なアスペクト比

    正しい比率を使用する

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

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

    正しい縦横比

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

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

    サイズ剤 player in studio

    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 サイズ)
    • で設定されたサイズ鬼ごっこ
    • 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日