Play on qwerty.work

【JS】videoタグ動画の画面クリックでPlay/Pauseできるようにする

Tue, 07 Dec 2021 17:11:05 +0900

画面タッチで再生/停止をしたい

サイトの背景イメージとしてにvideoタグで動画埋め込んだページを制作する機会がありました。背景なので、デザイン的にcontrolsで再生ボタンなどのツールバーは表示させたくありません。それを避けながらPlay/Pauseの機能を付けたいといった要望に応えることになりました。

そこで、方法を調べたらありました。結構、簡単にあっさり実現できました。参考にさせていただいたのは以下のページ。

https://qiita.com/ryo2132/items/bac787725c983d0e3f4b https://qiita.com/ryo2132/items/bac787725c983d0e3f4b

ソース例

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;
    }      
});