Ownedmedia ウェブ制作に役立つコンテンツを発信中!

JavaScript 2018.12.19

JavaScriptで再生や停止などvideo要素やaudio要素をコントロールする

Tags: ,,

過去記事「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から操作する

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?