JavaScriptによるVideo/Audio制御
HTML5ではVideo、Audioの各要素をJavaScriptより操作するメソッド、プロパティ、イベントが用意されており、これらを利用することでメディアの再生、停止を含めた細かい制御を行う事が可能です。
例えば、<video>タグのcontrol属性を指定することでコントロールインターフェースが自動で表示されますが、これはブラウザにより表示が異なる為、各ブラウザにおいてのデザイン統一が行えません。
しかし、これらの機能をJavaScript APIを利用し、制御することでブラウザに依存しないオリジナルのコントロールインターフェースの作成が可能です。
メディア要素を操作するメソッド
以下はVideo/Audio要素の親インターフェースであるMediaElementが持つプロパティ/メソッドです。これらのプロパティ/メソッドはVideo要素、Audio要素のどちらに対しても利用できます。
| 属性 | 内容 |
|---|---|
| error |
現在のエラー状態であるMediaErrorオブジェクトを返す エラーが無ければnullが返却される |
| currentSrc | メディアリソースのアドレスが返却される |
| networkState |
ネットワークアクティビティの状態を返す
|
| buffered | バッファしたメディア・リソースの範囲を表すTimeRangesオブジェクトを返却する |
| readyState | メディアデータのダウンロード状態を表す整数値
|
| seeking |
シーク中かどうか シーク中の場合trueが返却される |
| currentTime | 現在再生位置を表す秒数 |
| initialTime | 初期再生位置としてロード時に自動的にシークされた秒数 |
| duration | メディアデータの長さを表す秒数 |
| paused | 一時停止中かどうか |
| defultPlabackRate | デフォルトの再生速度。デフォルトは1.0 |
| playbackRate |
現在の再生速度。デフォルトは1.0 マイナスの場合は巻き戻しとなる |
| seekable | シーク可能なメディアリソースの範囲を表すTimeRangesオブジェクトを返す |
| ended | 再生が終了しているかどうか |
| play() | 動画の再生を行う |
| pause() | 動画の再生を行う |
| load() | 動画のロードをやり直す |
| canPlayType(type) |
指定されたMINEタイプのメディアデータの再生可否 戻り値は文字列で以下の値を返す
|
メディア操作に関するイベント
以下はMediaElementにおいて定義されているイベントとなります。
| イベント | 内容 |
|---|---|
| loadstart | メディアデータの読み込みを開始した |
| progress | メディアデータの読み込み中 |
| suspend | ダウンロードの一時停止（エラー状態ではない） |
| abort | エラーによりダウンロード中止 |
| error | エラー発生 |
| emptied | 読み込み開始に伴う初期化時に発生するイベント |
| stalled | データが予期しない理由で読み込めない時 |
| loadedmetadata | メタデータの読み込み完了 |
| loadeddata | メディアデータ読み込み完了 |
| canplay | 再生できる |
| canplaythrough | このままのダウンロード速度が続けば最後まで再生できる |
| playing | 一時停止等から復帰し再生が再開された |
| waiting | 次のフレームデータのダウンロード待ち |
| seeking | 指定再生位置への移動中 |
| seeked | 指定再生位置への移動完了 |
| ended | 再生終了 |
| durationchange | メディアデータの長さが更新された |
| timeupdate | 現在の再生位置が変更された時 |
| play | 再生中 |
| pause | 一時停止中 |
| ratechange | 再生速度が変更された |
| volumechange | ボリュームが変更された |
第1章 |  |
第2章 | |
第3章 | |
第4章 | |
