JavascriptでMP4をホバーで再生する方法

WEB制作、マーケティングに関する情報をお届けします。

JavascriptでMP4をホバーで再生する方法

2025.04.17

カテゴリ：WEB制作

タグ：

JavaScript

動画の素材サイトなどでよく見かけるホバーで動画が再生される機能ですが、ユーザーがクリックする必要がないこともありとても便利です。
動画クリエイターさんはポートフォリオサイトなどはとても便利でしょう。
今回は『JavascriptでMP4をホバーで再生する方法』を紹介します。

デモを見る

コードの紹介

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ホバーでMP4再生</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            margin-bottom: 20px;
        }
        video {
            width: 100%;
            max-width: 560px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <video playsinline muted loop>
                <source src="mp4/01.mp4" type="video/mp4">
            </video>
        </li>
        <li>
            <video playsinline muted loop>
                <source src="mp4/02.mp4" type="video/mp4">
            </video>
        </li>
        <li>
            <video playsinline muted loop>
                <source src="mp4/03.mp4" type="video/mp4">
            </video>
        </li>
        <li>
            <video playsinline muted loop>
                <source src="mp4/04.mp4" type="video/mp4">
            </video>
        </li>
    </ul>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const videos = document.querySelectorAll("video");
            videos.forEach((video) => {
                video.addEventListener("mouseenter", function () {
                    video.play();
                });
                video.addEventListener("mouseleave", function () {
                    video.pause();
                    video.currentTime = 0;
                });
            });
        });
    </script>
</body>
</html>

コードの解説

HTML、CSSの解説は割愛します。

JavaScript

読み込みが完了したら実行します。

document.addEventListener("DOMContentLoaded", function () {
});

以下で全てのvideoタグを取得します。

const videos = document.querySelectorAll("video");

ループで全てのvideoタグにイベントを設定します。

videos.forEach((video) => {
});

iframeに振ってある『youtube』の要素を取得します。

const youtubeFrames = document.querySelectorAll(".youtube");

addEventListenerでvideoタグにイベントを設定していきます。
『mouseenter=ホバー』、『mouseleave=ホバーを外れた時』です。
『video.play()』で再生、『video.pause()』で再生をストップさせます。
『video.currentTime』は再生位置の指定です。
0を代入した場合は再生の開始タイミングに戻されます。

videos.forEach((video) => {
    video.addEventListener("mouseenter", function () {
        video.play();
    });
    video.addEventListener("mouseleave", function () {
        video.pause();
        video.currentTime = 0;
    });
});

以上で実装完了です。