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

    プレーヤーのサイズ設定

    このトピックでは、ビデオのサイズを変更する方法と 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 サイズは、 widthheight の属性 iframe 要素。 これを行うにはいくつかの方法があります:

    • 属性を iframe 素子

    • CSSを iframe 素子

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

    属性を iframe 素子

    追加して設定する widthheight 属性を 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では、 widthheight の属性 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 素子

    追加して設定する widthheight 属性を 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 タグでは、これらの属性はピクセル単位で測定されます のみ。 実際には、あなたの heightwidth 属性( 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日