javascript 動画上のマウス操作のみ検出させる

はじめに

モーダルで動画を表示するサービスの開発をしています。
画面上のどこで操作しても再生している動画内に停止ボタンが表示されてしまう現象が発生していました。
これを動画上での操作のみを検出してその時だけ停止ボタンが表示されるように修正しました。
その対応方法を記載しております。

修正前のソース

document全体に対してEventListenerを追加しているため、どこでマウスを動かしても表示している動画コンテンツの再生ボタンに影響してしまいます。

function fadeInOutControl() {

    document.addEventListener('mousemove', () => {
        // マウス操作で再生停止ボタンを表示・非表示処理など
    });
}

↓

修正後のソース

修正後のソースではvideoを表示しているコンテンツに対してのみEventListenerを追加しました。
それによって動画を表示しているコンテンツ上でのみmousemoveが反応するようになりました。

function fadeInOutControl() {
    const video_content = document.getElementsByClassName('video-content')[0];

    // 動画上でのマウス操作でのみアイコンとコントロールバーを表示する
    video_content.addEventListener('mousemove', () => {
        // マウス操作で再生停止ボタンを表示・非表示処理など
    });
}

これで以上になります。