プレーヤーのサイズ変更
サイズ変更の考慮事項
動画とプレーヤーのサイズを決める際には、次の 2 つの重要な概念があります。
-
アスペクト比 — プレーヤーの作成時にカールステートメントで設定されるメディアの幅と高さのプロパティで、アスペクト比とも呼ばれる固有のビデオサイズを定義します。
- プレーヤーサイズ — CSS または HTML コードで設定されるプレーヤーの幅と高さのプロパティで、プレーヤーのサイズを制御します。プレーヤーのサイズを変更すると、コントロールが正しく配置されるように、固有のビデオサイズが使用されます。
アスペクト比の設定
ビデオのアスペクト比は、幅と高さの関係です。従来のテレビは 4:3 のアスペクト比を使用し、ワイドスクリーンは 16:9 のアスペクト比を使用します。
プレーヤーを作成するときに、Studioを使用してビデオの幅と高さを指定できます。使用プレイヤーモジュール、プレイヤー情報セクション。
ビデオのアスペクト比は同じままで、プレーヤーのサイズが変更されると、プレーヤーのコントロールが正しく配置されます。
間違った比率を使用する
ビデオの寸法とは異なるメディア縦横比を指定すると、ビデオの周囲にレターボックスが表示され、プレーヤーコントロールはビデオの上に配置されません。
ここでは、16：9のアスペクト比を持つTigerビデオを使用しながら、メディアの幅と高さをそれぞれ640pxと480px（4：3のアスペクト比）に設定します。
正しい比率を使用する
メディアの寸法が動画のアスペクト比と一致する場合、文字ボクシングは行わず、プレーヤーのサイズを変更してもプレーヤーコントロールの位置は正しく維持されます。
ここでは、メディアの幅と高さをそれぞれ640pxと360px（アスペクト比16：9）に設定しました。これは、Tigerビデオと同じです。
プレーヤーサイズを設定する
プレーヤーのサイズは、Studioを使用して設定できます。使用プレイヤーモジュール、プレイヤー情報セクション。
次のセクションで詳しく説明するように、CSSを使用してプレーヤーのサイズを設定することもできます。
iframeを使う
iframe実装の場合、プレーヤーのサイズは、widthそしてheightの属性iframe素子。これにはいくつかの方法があります。
-
iframe要素に属性を追加する -
iframe要素で CSS を使う -
id属性で CSS を使う
iframe要素に属性を追加する
widthheightiframe要素に属性と属性を追加して設定します。
<!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>
iframe要素で CSS を使う
CSS で、widthheightiframe要素の属性と属性を設定します。
<!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>
id属性で CSS を使用する
CSS では、idiframe要素に追加されたを参照します。この方法は、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>
埋め込み_in_pageを使う
embed_in_page実装の場合、プレーヤーのサイズは、widthおよびの高さ属性video素子。これを行うにはいくつかの方法があります。
video要素に属性を追加する- CSS をクラス属性とともに使用する
id属性で CSS を使う
video要素に属性を追加する
widthheightvideo要素に属性と属性を追加して設定します。
<!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>
クラス属性でCSSを使用する
video要素には、プレーヤーのサイズを設定するために CSS から参照できる class 属性があります。
<!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>
id属性で CSS を使用する
CSS では、idvideo要素に追加されたを参照します。この方法は、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>
パーセンテージを使用する
Brightcove Playerのheightwidthiframevideoまたはタグの場合、これらの属性はピクセル単位でのみ測定されます。実際、heightwidth属性と属性の単位はまったく入力しません（pxですが、技術的には無効なHTMLです）：
width="480"
パーセンテージを使用することができ、これは2つの異なる方法でCSSを使用して達成することができます。
stylevideoタグ内の属性を使用します。<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 ルールを適用して、フルスクリーンに切り替えるときにプレーヤーを 100% に拡大/縮小する必要があります。そうしないと、プレーヤーはフルスクリーンディスプレイ内に元のサイズで表示されます。
フルスクリーンモードのときにプレーヤーがスケールされるようにするには、次の CSS を使用します。
/***************************
* 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;
}
優先順位
プレイヤーのサイズを設定する方法はいくつも見てきました。以下は、優先順位のリストです。
- ランタイムの変更 (JavaScript を使用してプレーヤーのサイズを変更する)
- <video-js> タグで設定するサイズ
- CSS（通常の継承規則に従う）
- プレーヤーの構成設定
プレーヤー API のサイズ
Player API には、ピクセル単位でサイズを返すプレーヤーメソッドが 4 つありますが、その違いを理解することが重要です。
.height()-height属性に設定された高さを返しますvideoタグ（その属性が設定されていない場合はheight()、0を返します）.width()-width属性に設定された幅を返しますvideoタグ（その属性が設定されていない場合はwidth()、0を返します）.currentHeight()-プレイヤーの現在の高さを返します。しかし、それは設定されています.currentWidth()-プレーヤーの現在の幅を返します。しかし、それは設定されています
ほとんどの場合、currentHeight()currentWidth()およびは使用するメソッドです。