勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  JavaScript

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

 

サンプル

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>

 

所感

youtube動画とかだとjQueryの「modal-video」プラグインで対応できそう(Video.jsは対応していないっぽい？)。

 

参考サイト

https://recooord.org/modal-window-on-javascript/

 - JavaScript

  関連記事

Video.jsで動画プレイヤーのシークバーを非表示にし早送りさせない方法

Video.jsで動画を早送りさせないようシークバーを非表示にしたい。ただ、オプ ...

YouTube埋め込み動画が再生終了したタイミングでJavaScriptの処理を実行させる方法

YouTube埋め込み動画が再生終了した際に、あらかじめ登録してあるJavaSc ...

Video.jsで表示させた動画プレイヤーにロゴ画像(透かし)を追加する方法(videojs-logo)

Video.jsで表示させた動画プレイヤーの右上等、指定の位置にロゴ画像(透かし ...

Video.jsでYoutube動画を取り扱う方法

Video.jsでYoutube動画を取り扱いたい。具体的にはVideo.jsの ...

Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法

Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...