JavaScriptで動画再生を操作する

#動画の設置

##```<video>``` 要素の記述
htmlの基本的な記述は以下の通り。
```<video>```要素の```src```属性で動画のパスを指定します。動画再生に非対応の古いブラウザ用に、代替テキストや画像を用意するとよいと言われています。その場合は、```<video>```要素内に記述します。

```index.html
<video src="./hoge.mp4">
  <p>ご使用のブラウザでは動画再生に対応していません</p>
</video>
```

HTML5以降では、```<video>```要素内に```<source>```要素を記述し、複数のソースを指定することが可能です。その場合は、上から順に```<source>```をみていき、再生可能なものが利用されます。

```index.html
<video>
  <source src="./hoge.mp4" type="video/mp4">
  <source src="./hoge.webm" type="video/webm">
　<p>ご使用のブラウザでは動画再生に対応していません</p>
</video>
```

## ```<video>``` 要素に指定できる属性

```<video>``` 要素の```controls```属性を使用することで、ブラウザに用意されたコントローラを使用することができます。インターフェースはブラウザに依存します。
コントローラーは使用せず、JavaScriptで操作する場合の記述は、次のセクションにまとめています。

```index.html
<video src="./hoge.mp4" controls>
  <p>ご使用のブラウザでは動画再生に対応していません</p>
</video>
```

その他、 ```<video>```要素には、以下の属性を指定できます。

|属性|機能  |値  |
|---|---|---|
|autoplay |ロードされたら自動的に再生を開始 |なし |
|loop |ループ再生する |なし |
|muted |デフォルトで音量をゼロにする |なし |
|preload |データのプリロードについての指定 |"none"/"metadata"/"auto" |
|poster |データが再生可能になるまでに表示させる画像 |画像のパス |
|width |高さ |整数値 |
|height |幅 |整数値 |

参考: https://developer.mozilla.org/ja/docs/Web/HTML/Element/video


#JavaScriptでの動画再生

JavaScriptで動画を操作する場合の主要な記述を以下にまとめています。

##動画の再生操作
```index.html
<video id="video" src="./hoge.mp4">
  <p>ご使用のブラウザでは動画再生に対応していません</p>
</video>
```

```main.js
var v = document.getElementById('video');
//再生
v.play();
//一時停止
v.pause();
//ロード
v.load();
```

###play()
```paused``` 属性を```false```に設定する、必要に応じリソースをロードする、再生を開始する

###pause()
再生を中断する、```paused```属性を```true```に設定する、必要に応じリソースをロードする

###load()
要素をリセットする、新たなリソースを選択しロードを開始する

##JavaScriptでの再生位置の取得

```main.js
//再生位置の取得
v.addEventListener('timeupdate', function() {
  if (v.currentTime !== 0) {
    console.log(timeConvert(v.currentTime));
  } else {
    console.log('0:00');
  }
})
//数値型から”00：00”表記への変換（秒、ミリ秒の場合）
function timeConvert(time) {
  var sec = Math.floor(time);
  var msec = ((time - sec) * 100).toFixed(0);
  return sec + ':' + msec;
}
```

###currentTimeプロパティ
再生位置を数値型データ（秒単位）で返す

###durationプロパティ
メディアの再生時間を数値型データ（秒単位）で返す

###再生状態に関するプロパティ
* ```played```: 再生が完了した時間の長さを表す
* ```paused```: 再生が一時停止されているかどうかをBoolean値で表す
* ```ended```: 再生が終了しているかどうかをBoolean値で表す
* ```error```: 直近で発生したメディアのダウンロード中のエラーを``error``オブジェクトで返す

###再生の設定に関するプロパティ
* ```loop```: 繰り返し再生の有効・無効をBoolean値で表す
* ```controls```: 再生をコントロールするユーザインタフェースの表示・非表示をBoolean値で表す
* ```preload```: メディアをプリロードすべきか指定する、``none``、``metadata``、``auto``のいずれかの値をとる
* ```autoplay```: htmlの``autoplay``属性を反映し、Boolean値で表す

###再生状態に関するイベントハンドラ

* ```play```: 再生が開始したとき
* ```timeupdate```: 再生位置が変化したとき
* ```pause```: 再生が中断したとき
* ```playing```: 再生中断状態から、ふたたび再生可能になったとき
* ```waiting```: 次のフレームの受信を待っているとき
* ```ended```: 再生が完了したとき
* ```error```: 再生中にエラーが発生したとき
* ```abort```: エラー以外の原因で再生が停止したとき


##メディアの読み込みステータスの取得
###readyStateプロパティ
メディアリソースの読み込みの状態を取得する。戻り値は以下の通り。

* ```0``` :HAVE_NOTHING
リソースに関するいかなる情報も利用できない状態

* ```1```: HAVE_METADATA
リソースの情報（ビデオ要素の場合、ビデオの高さ・幅など）を取得済み、再生位置に関するデータは未取得

* ```2```: HAVE_CURRENT_DATA
再生位置に関するデータは取得済み、再生位置より先のフレームデータは未取得

* ```3:``` HAVE_FUTURE_DATA
再生位置より先のフレームデータも取得済みで、早送りができる状態

* ```4```: DONE（完了）
```3```の状態で、なおかつ、十分なデータがロードできていて、このまま再生しても、再生位置が読み込みデータを追い越さないような状態

###networkStateプロパティ
メディアリソースの読み込みのネットワークの状態を取得する。戻り値は以下の通り。

* ```0```: NETWORK_EMPTY
リソースに関するいかなる情報も利用できない状態
（```redayState```プロパティのHAVE_NOTHINGと同じ状態）

* ```1```: NETWORK_EMPTY
要素がアクティブではあるが、ネットワークは使用されていない状態　（リソースが取得できている）

* ```2```: NETWORK_LOADING
リソースの読み込み中

* ```3```: NETWORK_NO_SOURCE
リソースが見つからない

###ロード状態に関するイベントハンドラ

```index.html
<video id="video">
  <source src="./hoge.mp4" type="video/mp4">
  <p>ご使用のブラウザでは動画再生に対応していません</p>
</video>
<p id="state"></p>
```

```main.js
document.addEventListener('DOMContentLoaded', function() {
  var v = document.getElementById('video');
  var state = document.getElementById('state');
  //ロード開始
  v.addEventListener('loadedmetadata', function() {
    state.textContent = 'ロードを開始しました';
  })
  //読み込み完了
  v.addEventListener('loadeddata', function() {
    state.textContent = '読み込み完了しました';
  })
  //再生可能
  v.addEventListener('canplay', function() {
    state.textContent = '再生可能です';
  })
  //再生中
  v.addEventListener('playing', function() {
    state.textContent = '再生中です';
})
```

#参考
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement