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