javascript - 停用模式后停止视频(videojs)

Question

我使用videojs插件自定义视频播放器。

我有30个模态，每个模态(Youtube，Dailymotion，Vimeo)中都有一个不同的视频。

我添加了两个按钮next / prev，以在每个模式之间进行传递(模式始终处于打开状态)。

一切正常。每个视频都很好地显示。

但是我有两个问题:

每次我打开新的模态时，都会自动播放视频。

当我关闭模式时，视频将继续播放。

对于我的代码的摘录，我使用了ID #popin-1，但是每个模式都有一个不同的ID 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();
            }
        });

    });

Answer 1

如果您正在使用引导模式，则应该可以使用此代码。

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

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