以前の記事でvideoタグの使い方について紹介しました。
デザインに拘る方はvideoタグのデフォルトのコントローラは、デザインがイマイチと思う方もいるかもしれません。そこで今回はJQueryを利用して、動画の再生・停止の切り替えボタンを実装する方法について紹介していきます。
再生・停止の切り替えボタンを実装する方法
今回はシンプルな構成として、停止ボタンを設置してボタンを押すと動画が停止して、再生ボタンに切り替わるようなコードを作成してみました。応用すると再生停止や音声などの変更も実装できるので、ブラウザ画面全体に動画を表示するようなサイトで活用できるかと思います。
それでは実装するためのHTMLコードと、Javascript（JQuery）コードについて紹介していきます。
HTMLコード
下記コードがHTMLコードとなります。
<video id="video" src="sample.mp4" muted autoplay playsinline loop></video>
<div id="video-btn"></div>動画を設置するためのvideoタグと、ボタンを背景画像として表示するためのdivタグを記述しています。videoタグの属性は、ご自身の実装要件に合わせて変更してください。
Javascriptコード
下記コードがJavascriptコードとなります。
head内に記述するか、JSファイルを作成して読み込んでください。
$(function(){
$("#video-btn").click(function (){
if($('#video')[0].paused){
$('#video')[0].play();
$(this).addClass('current');
}else{
$('#video')[0].pause();
$(this).removeClass('current');
}
});
});クリックイベントを作成して、ボタンが押されるとイベントが発生するようにします。
条件文で動画の状態を判定し、動画が再生されていればpause()で停止、停止していればplay()で再生をするようにしています。注意していただきたいところは、videoタグを制御する場合には、$('#video')の後ろに[0]を付けることが必要です。
またボタンに対して、クラスのaddClassで付与、removeClassで削除の処理を追加し、ボタン画像の切り替えを行っています。
※今回はCSSの記述は省略していますが、背景画像として画像を設置しています。
以上のような単純なコードで、JQueryで動画を制御することが可能です。
応用すれば、デザイン性に拘ったコントローラーのように作成できるので、いろいろと試行錯誤をしていただければと思います。
JQueryで動画の再生・停止の切り替えボタンを実装する方法まとめ
JQueryで動画の再生・停止の切り替えボタンを実装する方法について紹介してきました。
5Gなどの通信の高速化が進む中で、動画を率先して使用するようなサイトが増えている中で、Youtubeにアップした動画を使うことや、videoタグを使うようなケースが増えてきているので、自在にvideoタグで動画を制御できるように知識を深めていただければと思います。
videoタグの使い方について知りたい方は、下記記事を参考にしてください。
