JavaScriptで再生や停止などvideo要素やaudio要素をコントロールする
過去記事「Webページの動画再生で使うvideo要素を使いこなす」ではHTML5のvideoタグの基本的な使い方をまとめていましたが、このvideoやaudioなどの要素はJavaScriptで外からコントロールすることが可能です。
今回はvideo要素やaudio要素をjavascriptを使ってコントロールするいろいろなサンプルケースをまとめていきたいと思います。
これらのメゾットはいろんなイベントに発火させて使いますが、下記のようにvideo要素、audio要素に使えるイベントも用意されています。
これらのメゾットやイベントを使ってvideo要素、audio要素を操作する時のサンプルのソースコードになります。ここでは再生、一時停止をbutton要素のクリックで制御する例になります。
いかがでしょうか、ただ再生させるのであればHTMLの要素で完結しますが、特定のタイミングで再生や停止をなどの制御をする場合には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]; | ボリュームを下げる |
Element.addEventListener('play'); | メディアが再生されている時に実行する |
---|---|
Element.addEventListener('pause'); | メディアが一時停止されている時に実行する |
Element.addEventListener('timeupdate'); | メディアが再生時間が変更された時に実行する |
Element.addEventListener('volumechange'); | メディアのボリュームが変更された時に実行する |
Element.addEventListener('ended'); | メディアの再生時間が全て経過し、終了した時に実行する |
<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から操作する
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
categories