サポート問い合わせ先
システムステータス
プレーヤーのサイズ設定
サイジングの考慮事項
ビデオのサイズを変更する際に留意すべき重要な概念が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 の作成と管理 モジュール、 プレーヤー情報 の項目を検索します。
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() あなたが使いたいメソッドです。