【JS】videoタグ動画の画面クリックでPlay/Pauseできるようにする
目次
画面タッチで再生/停止をしたい
サイトの背景イメージとしてにvideoタグで動画埋め込んだページを制作する機会がありました。背景なので、デザイン的にcontrols
で再生ボタンなどのツールバーは表示させたくありません。それを避けながらPlay/Pauseの機能を付けたいといった要望に応えることになりました。
そこで、方法を調べたらありました。結構、簡単にあっさり実現できました。参考にさせていただいたのは以下のページ。
ソース例
HTML
<div class="video-wrap"> <source src="test.mp4" type="video/mp4" /> <img src="test-movie.jpg" /> </video> <div class="video-btn" id="video-btn"></div> </div>
CSS
.video-wrap { position: relative; } .video-btn { content: ""; position: absolute; top:0; left:0; right:0; bottom:40px; /*コントローラー分下部に余白を*/ cursor: pointer; z-index: 2; /*ボタンが前面になるようにする*/ }
Javascript
const video = document.querySelector('#video'); const video_btn = document.querySelector('#video-btn'); let is_playing = false; video_btn.addEventListener('click', () => { if (!is_playing) { video.play(); is_playing = true; } else { video.pause(); is_playing = false; } });