Video.js完全マニュアル part5 〜標準のvideo要素のオプション〜

# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart5です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。

この記事ではVideo.jsで利用可能なオプションについての解説です。Video.jsのオプションの渡し方は前回の記事を参考にしてください。

前回
[Video.js完全マニュアル part4 〜Video.jsの初期化〜
](https://qiita.com/manzoku_bukuro/items/f5bef03dc2fdb53139e6)

part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)

# この記事の対象者
- Video.jsを利用する人
- 動画プレイヤーのUI操作をしたい人
- 動画再生関連のサービスを作りたい人
- Video.jsの初期化時のオプションを知りたい人

# この記事の解説する章
[Video.jsのオプション](https://videojs.com/guides/options/)

# 標準のvideo要素のオプション
今回の記事ではVideo.jsの初期化時に渡すオプションで、標準のvideo要素で使われるオプションについて解説します。

## autoplay
> Type: boolean | string

videoタグにautoplay属性を使用する代わりに、`videojs()`メソッドでautoplayオプションを渡す必要があります。有効な値は以下の通りです。

### `'autoplay': false`
自動再生がされない

### `'autoplay': true`
自動再生が実行される

### `'autoplay': 'muted'`
ビデオ要素をミュートしてから自動再生が実行される

### `'autoplay': 'any'`
自動再生を実行し、再生がされなかった場合はミュートしてから自動再生が実行される

#### 使用例
```js
videojs('video1', {
    'autoplay': 'muted',
});
```

## controls
> Type: boolean

コントローラーを表示させるかどうかを指定します。表示させる指定をしなければ、動画を再生させる為にはautoplay指定をするかPlayer APIを使用する必要があります。

#### 使用例
```js
videojs('video1', {
    'controls': true,
});
```

## height
> Type: string | number

Playerの表示高さを指定します。

### `'height': '200px / 80%'`
string型で値を指定する方法です。

### `'height': '100'`
number型で値を指定する方法です。この場合高さが100pxのPlayerが生成されます。

#### 使用例
```js
videojs('video1', {
    'height': '80%',
});
```

## width
> Type: string | number

Playerの表示幅を指定します。

### `'width': '200px / 80%'`
string型で値を指定する方法です。

### `'width': '100'`
number型で値を指定する方法です。この場合幅が100pxのPlayerが生成されます。

#### 使用例
```js
videojs('video1', {
    'width': '80%',
});
```

## loop
> Type: boolean

動画が再生完了後に再度再生するかを指定します

#### 使用例
```js
videojs('video1', {
    'loop': true,
});
```

## muted
> Type: boolean

初期状態で無音にするかどうかを指定します

#### 使用例
```js
videojs('video1', {
    'muted': false,
});
```

## poster
> Type: string

ビデオの再生が始まる前に表示される画像をURLで指定します。ユーザーが再生をすることでこの画像は非表示となります。

#### 使用例
```js
videojs('video1', {
    'poster': './sample.img',
});
```

## preload
`<video`要素が読み込まれると同時に動画データのダウンロードを開始するかどうかを指定します

### `'preload': 'auto'`
ブラウザがサポートしている場合は、動画の読み込みをすぐに開始します。機器によってはデータ使用量を保護する為に動画を事前にロードしない場合もあります。
なので`true`のように動作を決定するものではありません。

### `'pleload': 'none'`
ユーザーが再生をするまで動画のデータをダウンロードしません。

### `'pleload': 'metaload'`
動画の総時間等の情報を含む、動画のメタデータだけを事前に読み込みます。
メタデータ以外のデータは、ユーザーが再生を行ったタイミングでダウンロードします。

#### 使用例
```js
videojs('video1', {
    'pleload': 'none',
});
```
## src
> Type: string

動画のsrcをオプションで渡して指定することが出来ます。

#### 使用例
```html
<video-js id="video1"></video-js>
```
```js
videojs('video1', {
    'src': 'https://vjs.zencdn.net/v/oceans.mp4',
});
```

## video要素のオプションとして渡す場合
今まで紹介したオプションは、全て標準のvideo要素のオプションで渡すことが出来ます。
使用例ではvideojsメソッドのオプションオブジェクトとして渡していましたが、video要素のオプションで指定した場合は以下のようになります。

```html
<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](https://twitter.com/manzoku_bukuro)もやってます