Остановить видео, когда модал закрыт (videojs) - PullRequest
Новая
       11

Остановить видео, когда модал закрыт (videojs)

0 голосов
/ 06 июня 2019

Я использую плагин videojs для настройки видеоплеера.

У меня есть 30 модальностей с одним видео в каждом из них (Youtube, Dailymotion, Vimeo).

Я добавил две кнопки «следующий / предыдущий» для перехода между каждым модальным режимом (режим всегда открыт).

Все отлично работает. Каждое видео хорошо отображается.

Но у меня есть две проблемы:

  1. Каждый раз, когда я включаю новый модал, видео автоматически воспроизводится.
  2. Когда я закрываю модальное видео, видео продолжает воспроизводиться.

Для выдержки из моего кода я использовал идентификатор #popin-1, но каждый модал имеет свой идентификатор id="popin-1", id="popin-2", id="popin-3", id="popin-4"

Ссылки каждого модального вида выглядят так: 

<a href="#" class="btn-open" data-modal="popin-1">Open my modal</a>

HTML-код каждого модала: 

<div id="popin-1" class="popin__item">
    <div class="popin__wrapper btn-action">
        <div class="popin__inner">
            <a href="#" class="btn-close btn-action"></a>
            <div class="popin__canva">
                <div class="popin__video">
                    <a href="#" class="btn-next"></a>
                    <a href="#" class="btn-prev"></a>
                    <div class="popin__video-container">
                        <video
                        id="vid-1"
                        class="video-js vjs-default-skin vjs-big-play-centered"
                        controls
                        autoplay
                        width="640" height="264"
                        data-setup='{ "techOrder": ["youtube"], "autoplay": true, "fluid": true, "sources": [{ "type": "video/youtube", "src": "http://my-video-url.com"}] }'
                        >
                    </video>
                </div>
            </div>
            <div class="popin__content">
                <p>Some text</p>
            </div>
        </div>
    </div>
</div>
</div>

И, наконец, моя функция js. Я пытался 

$('.btn-open').each(function(i, el) {
        var modal = $('#' + $(el).attr('data-modal'));
        var overlay = $('.popin__overlay');
        var close = $('.btn-action');

        var player = videojs('popin__item');

        function removeModal() {
            modal.removeClass('show');
            overlay.removeClass('show');
            $('body').removeClass('no-overflow');
            modal.player.pause();
        }

        function removeModalHandler() {
            removeModal();
        }

        $(el).click(function(e) {
            e.preventDefault();
            modal.addClass('show');
            overlay.addClass('show');
            $('body').addClass('no-overflow');
        });

        close.click(function(e) {
            if($(e.target).hasClass('btn-action')) {
                e.preventDefault();
                removeModalHandler();
            }
        });

    });

1 Ответ

0 голосов
/ 06 июня 2019

Если вы используете модал начальной загрузки, вы сможете использовать этот код. 

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

https://getbootstrap.com/docs/4.0/components/modal/#events

...