0%

Programmingプログラミングナレッジ

Posted:2018.12.19

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

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】