HOME > JavaScript > ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法

ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法

2024/08/23 JavaScript 動画関連 Video.js

ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィンドウ表示内に表示させたい。また、モーダルウィンドウを開いた時点で動画を再生させたい。以下にサンプルと実装方法をメモ。

1 サンプル
2 ソースコード
3 所感
4 参考サイト

サンプル

https://taitan916.info/sample/Video.js/modalwindow/

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法サンプル</title>
<style>
.modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0,0,0,50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
}
.modal:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-left: -0.2em;
}
.modal.is-active{
    opacity: 1;
    visibility: visible;
}
.modal-container{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 600px;
    width: 90%;
}
.modal-close{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    color: #fff;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
    z-index: 999;
}
.modal-content{
    background: #fff;
    text-align: left;
    line-height: 1.8;
}
.modal-content p{
    margin: 1em 0;
}

</style>
</head>
<body>

    <button class="modal-open js-modal-open">動画を再生する</button>

    <div class="modal js-modal">
        <div class="modal-container">
            <div class="modal-close js-modal-close">×</div>
            <div class="modal-content">
                <div class="video_div">
                    <video id="video" class="video-js"></video>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video-js.min.css" rel="stylesheet">

    <script>
    const modal = document.querySelector('.js-modal');
    const open = document.querySelector('.js-modal-open');
    const close = document.querySelector('.js-modal-close');

    function modalOpen() {
        modal.classList.add('is-active');
        const option = {
            autoplay: false, //自動再生
            loop: false, //ループ
            controls: true, //コントローラー表示
            preload: 'auto', //ビデオデータのダウンロードをすぐに開始するかどうか
            notSupportedMessage: '動画再生できません', //再生不可の際のメッセージ
            aspectRatio: '16:9',
            controlBar: {
                remainingTimeDisplay: {
                    displayNegative: false, //残再生時間を正数で表示
                },
            },
        };
        const player = videojs('video', option);
        player.src({
            type: 'video/mp4',
            src: '../test.mp4',
        });
        player.play();
    }
    open.addEventListener('click', modalOpen);

    function modalClose() {
        modal.classList.remove('is-active');
    }
    close.addEventListener('click', modalClose);

    function modalOut(e) {
        if (e.target == modal) {
            modal.classList.remove('is-active');
        }
    }
    addEventListener('click', modalOut);
    </script>
</body>
</html>