プレーヤーのサイズ設定
サイジングの考慮事項
ビデオのサイズを変更する際に留意すべき重要な概念が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()
あなたが使いたいメソッドです。