Video.js完全マニュアル part10 〜Playerのサイズ設定〜

はじめに

Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart2です。
Video.jsの公式のガイドであるVideo.js Guidesを翻訳ツールを使いながら解説していきます。

前回はPlayerの外観の変更方法を紹介しました。今回もPlayerの見た目に関する操作で、Playerのサイズ感を設定する方法について紹介します。

前回
Video.js完全マニュアル part9 〜Playerの外観〜

part1から読む人はこちら

この記事の対象者

• Video.jsを利用する人
• 動画プレイヤーのUI操作をしたい人
• 動画再生関連のサービスを作りたい人

この記事の解説する章

Layout

Playerのサイズ設定

Playerでは、通常のDOM要素と同様にCSSを設定してPlayerのサイズを設定することが出来ます。
それでもいいですがVideo.jsが用意しているサイズの設定方法を利用してサイズ感を調整することが出来るので紹介します。

大きく分けて3つのサイズ設定方法がありますのでそれぞれの方法を紹介します。

Fluid Mode

特定のアスペクト比を保つ状態です。
Fluid Modeに設定すると、デフォルトだと読み込んだ動画の固有比率を利用しますが、オプションやクラスを利用して設定比率を変更することが出来ます。

Fluid ModeとFill Modeのどちらにも設定されていた場合、Fluid Modeが優先されます。

classによる設定方法

以下のclassを指定すれば、Player生成と同時にFluid Modeになります。

vjs-fluid

vjs-fluidというclassを設定すれば、動画の固有比率でFluid Modeが適用されます。

<video-js id="video1" class="vjs-fluid" controls></video-js>

vjs-16-9,vjs-16-9,vjs-9-16,vjs-1-1

例えばvjs-16-9というclassを設定すれば、16:9の動画比率ででFluid Modeが適用されます。
classで指定できる動画比率はvjs-16-9,vjs-16-9,vjs-9-16,vjs-1-1の4つとなります。

<video-js id="video1" class="vjs-16-9" controls></video-js>

Optionによる設定

fluidオプション

'fluid': trueのオプションを渡すことで、Player生成と同時にFluid Modeになります。

const video1 = videojs('video1', {
    'fluid': true,
});

aspectRatioオプション

'aspectRatio'のオプションで指定の動画比率を渡すことで、Player生成と同時に指定した動画比率でFluid Modeになります。

const video1 = videojs('video1', {
    'aspectRatio': '4:3',
});

関数による設定

fluid()関数

fluid(true)の関数を実行することで、Player生成後でもFluid Modeになります。

const video1 = videojs('video1'});
video1.fluid(true);

また、引数にfalseを指定することでFluid Modeを解除することが出来ます。

video1.fluid(false);

aspectRatio()関数

aspectRatio()関数で引数に指定の動画比率を渡すことで、Player生成後でも指定の動画比率でFluid Modeになります。

また、既にオプションやfluid()関数でFluid Modeとなっていた場合は動画比率だけ変更することが出来ます。

const video1 = videojs('video1'});
video1.aspectRatio('4:3');

Fill Mode

Fill Modeは親要素のサイズにフィットするように動画サイズを変更する方法です。これはVideo.jsのPlayer用のコンテナーが既に用意されている場合は利用した方が良いです。

classによる設定方法

以下のclassを指定すれば、Player生成と同時にFill Modeになります。

vjs-fill

vjs-fillというclassを設定すれば、Player生成と同時にFill Modeが適用されます。

<video-js id="video1" class="vjs-fill" controls></video-js>

Optionによる設定

fillオプション

'fill': trueのオプションを渡すことで、Player生成と同時にFill Modeになります。

const video1 = videojs('video1', {
    'fill': true,
});

関数による設定

fill()関数

fill(true)の関数を実行することで、Player生成後でもFill Modeになります。

const video1 = videojs('video1'});
video1.fill(true);

また、引数にfalseを指定することでFill Modeを解除することが出来ます。

video1.fill(false);

Responsive Mode

ResponsiveModeでは、ユーザーの画面サイズに合わせて自動的にPlayerのサイズが切り替わります。
視聴端末によってPlayerのサイズを変更したい場合に設定した方が良いです。

また、ResponsiveModeを有効にするにはFuildModeとFillModeを有効にする必要があります。

Optionによる設定

responsiveオプション

'responsive': trueのオプションを渡すことで、Player生成と同時にFill Modeになります。
FillModeもしくはFuildModeに指定していない場合、ResponsiveModeにはなりません。

const video1 = videojs('video1', {
    'fill': true, // もしくは'fuild': true
    'responsive': true,
});

関数による設定

responsive()関数

responsive(true)の関数を実行することで、Player生成後でもResponsive Modeになります。

const video1 = videojs('video1'});
video1.responsive(true);

また、引数にfalseを指定することでResponsive Modeを解除することが出来ます。

video1.responsive(false);

有効になるclass

Responsive Modeに設定されると、以下のクラスがPlayerに対して自動的に切り替わります。

NAMEについては後ほど説明するbreakpoints()関数で利用します。

NAME	CLASS	MIN. WIDTH	MAX. WIDTH
tiny	vjs-layout-tiny	0	210
xsmall	vjs-layout-x-small	211	320
small	vjs-layout-small	321	425
medium	vjs-layout-medium	426	768
large	vjs-layout-large	769	1440
xlarge	vjs-layout-x-large	1441	2560
huge	vjs-layout-huge	2561	Infinity

例えば現在表示中の画面サイズが800pxだった場合、Playerにはvjs-layout-largeclassが付与されます。

なので以下のように限定的なstyle指定を追加することで、ブレイクポイントによって指定スタイルを変更することが出来ます。

<style>
.vjs-layout-large {
    width: 80%;
}
.vjs-layout-medium {
    width: 60%;
}
</style>

ブレイクポイントのカスタマイズ

デフォルトで設定されているブレイクポイントは上記の表の通りですが、オプションや関数を利用することでブレイクポイントを変更することが出来ます。

breakpointsオプション

breakpointsオプションはオブジェクトで渡します。キー名を上記のテーブルのNAME、値を設定したいmax-widthを渡すことでデフるとのブレイクポイントを変更できます。

const video1 = videojs('video1', {
    'fill': true, // もしくは'fuild': true
    'responsive': true,
    'breakpoints': {
        'medium': 500,
    }
});

上記の指定の場合、本来vjs-layout-mediumclassが付与されるのは426pxから768pxの間ですが、max-widthを変更した為、426pxから500pxの画面サイズの時に付与されるようになります。

breakpoints()関数

breakpoints()関数も同様にオブジェクトで設定したいブレイクポイントを渡すことでブレイクポイントをカスタマイズできます。

const video1 = videojs('video1', {
    'fill': true, // もしくは'fuild': true
    'responsive': true,
});

video1.breakpoints({
    'medium': 500,
})

また、デフォルトのブレイクポイントに戻したい時は以下のようにbreakpoints()関数の引数でtrueを渡せば元に戻ります。

video1.breakpoints(true)

最後に

以上がPlayerのサイズ設定方法になります。Video.jsが用意しているサイズ設定方法と、独自で設定するCSSを組み合わせてPlayerのサイズを自分好みにカスタマイズしましょう。

---

Twitterもやってます