勉強したことのメモ

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の動画プレイヤーにVTTファイルで字幕機能を実装する方法

Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Vi ...

Video.jsで動画再生開始時と終了時に指定したアクションを発火させる方法

以前にYouTube埋め込み動画が再生終了したタイミングでJavaScriptの ...

JavaScriptの動画プレイヤー用ライブラリ「Video.js」の利用方法

サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルか ...

VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

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

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