過去記事「Webページの動画再生で使うvideo要素を使いこなす」ではHTML5のvideoタグの基本的な使い方をまとめていましたが、このvideoやaudioなどの要素はJavaScriptで外からコントロールすることが可能です。   今回はvideo要素やaudio要素をjavascriptを使ってコントロールするいろいろなサンプルケースをまとめていきたいと思います。  

JavaScriptでメディアの再生や停止を制御する

video要素などをJavaScriptで制御することで、特定のイベントで再生や停止などを行うことができます。これにより、いろんなタイミングで動画や音声を扱うことができるようになります。   これらの要素をJavaScriptで扱うためにいろんなメゾットが用意されています。数はたくさんあるのですが、以下にいくつかまとめています。  

Element.play();	メディアを再生する
Element.pause();	メディアを一時停止する
Element.load();	メディアを読み込む
Element.duration();	メディアの再生時間を取得する
Element.currentTime();	再生時間を取得する
Element.currentTime = 0;	再生時間を先頭に戻す
Element.volume = + [INT];	ボリュームを上げる
Element.volume = - [INT];	ボリュームを下げる

  これらのメゾットはいろんなイベントに発火させて使いますが、下記のようにvideo要素、audio要素に使えるイベントも用意されています。  

Element.addEventListener('play');	メディアが再生されている時に実行する
Element.addEventListener('pause');	メディアが一時停止されている時に実行する
Element.addEventListener('timeupdate');	メディアが再生時間が変更された時に実行する
Element.addEventListener('volumechange');	メディアのボリュームが変更された時に実行する
Element.addEventListener('ended');	メディアの再生時間が全て経過し、終了した時に実行する

  これらのメゾットやイベントを使ってvideo要素、audio要素を操作する時のサンプルのソースコードになります。ここでは再生、一時停止をbutton要素のクリックで制御する例になります。  

<video id="media">
  <source src="./movie.mp4">
</video>
<button id="btn_play">再生</button>
<button id="btn_pause">一時停止</button>

<script>
  const mediaElem = document.getElementById('media');
  const playBtn = document.getElementById('btn_play');
  const pauseBtn = document.getElementById('btn_pause');
  playBtn.addEventListener('click',function(){
    mediaElem.play();
  });
  pauseBtn.addEventListener('click',function(){
    mediaElem.pause();
  });
</script>

  このようなケースの応用で、簡易メディアプレーヤーのインターフェースも作成することができます。実際に作成したものはこちらに用意しています。

See the Pen GPjaPM by designsupply (@designsupply) on CodePen.

 

---

  いかがでしょうか、ただ再生させるのであればHTMLの要素で完結しますが、特定のタイミングで再生や停止をなどの制御をする場合にはjavascriptを使うことで対応できるようになります。サイトコンテンツでも動画を使うケースが増えてきているので、是非参考にしてみてはいかがでしょうか。   （参考にさせて頂いたサイト） video要素、audio要素をJavaScriptから操作する