はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart5です。
Video.jsの公式のガイドであるVideo.js Guidesを翻訳ツールを使いながら解説していきます。
この記事ではVideo.jsで利用可能なオプションについての解説です。Video.jsのオプションの渡し方は前回の記事を参考にしてください。
前回
Video.js完全マニュアル part4 〜Video.jsの初期化〜
part1から読む人はこちら
この記事の対象者
- Video.jsを利用する人
- 動画プレイヤーのUI操作をしたい人
- 動画再生関連のサービスを作りたい人
- Video.jsの初期化時のオプションを知りたい人
この記事の解説する章
標準のvideo要素のオプション
今回の記事ではVideo.jsの初期化時に渡すオプションで、標準のvideo要素で使われるオプションについて解説します。
autoplay
Type: boolean | string
videoタグにautoplay属性を使用する代わりに、videojs()メソッドでautoplayオプションを渡す必要があります。有効な値は以下の通りです。
'autoplay': false
自動再生がされない
'autoplay': true
自動再生が実行される
'autoplay': 'muted'
ビデオ要素をミュートしてから自動再生が実行される
'autoplay': 'any'
自動再生を実行し、再生がされなかった場合はミュートしてから自動再生が実行される
使用例
videojs('video1', {
'autoplay': 'muted',
});
controls
Type: boolean
コントローラーを表示させるかどうかを指定します。表示させる指定をしなければ、動画を再生させる為にはautoplay指定をするかPlayer APIを使用する必要があります。
使用例
videojs('video1', {
'controls': true,
});
height
Type: string | number
Playerの表示高さを指定します。
'height': '200px / 80%'
string型で値を指定する方法です。
'height': '100'
number型で値を指定する方法です。この場合高さが100pxのPlayerが生成されます。
使用例
videojs('video1', {
'height': '80%',
});
width
Type: string | number
Playerの表示幅を指定します。
'width': '200px / 80%'
string型で値を指定する方法です。
'width': '100'
number型で値を指定する方法です。この場合幅が100pxのPlayerが生成されます。
使用例
videojs('video1', {
'width': '80%',
});
loop
Type: boolean
動画が再生完了後に再度再生するかを指定します
使用例
videojs('video1', {
'loop': true,
});
muted
Type: boolean
初期状態で無音にするかどうかを指定します
使用例
videojs('video1', {
'muted': false,
});
poster
Type: string
ビデオの再生が始まる前に表示される画像をURLで指定します。ユーザーが再生をすることでこの画像は非表示となります。
使用例
videojs('video1', {
'poster': './sample.img',
});
preload
<video要素が読み込まれると同時に動画データのダウンロードを開始するかどうかを指定します
'preload': 'auto'
ブラウザがサポートしている場合は、動画の読み込みをすぐに開始します。機器によってはデータ使用量を保護する為に動画を事前にロードしない場合もあります。
なのでtrueのように動作を決定するものではありません。
'pleload': 'none'
ユーザーが再生をするまで動画のデータをダウンロードしません。
'pleload': 'metaload'
動画の総時間等の情報を含む、動画のメタデータだけを事前に読み込みます。
メタデータ以外のデータは、ユーザーが再生を行ったタイミングでダウンロードします。
使用例
videojs('video1', {
'pleload': 'none',
});
src
Type: string
動画のsrcをオプションで渡して指定することが出来ます。
使用例
<video-js id="video1"></video-js>
videojs('video1', {
'src': 'https://vjs.zencdn.net/v/oceans.mp4',
});
video要素のオプションとして渡す場合
今まで紹介したオプションは、全て標準のvideo要素のオプションで渡すことが出来ます。
使用例ではvideojsメソッドのオプションオブジェクトとして渡していましたが、video要素のオプションで指定した場合は以下のようになります。
<video id="video1" class="video-js"
src="https://vjs.zencdn.net/v/oceans.mp4"
autoplay controls height=200 width="400px"
loop=true muted poster="./sample.jpg" preload="none"
data-setup='{}'>
</video>
最後に
今回は標準のvideo要素でも指定出来るオプションの項目を紹介しました。次回以降はVideo.js特有のオプションを紹介します。
Twitterもやってます