关闭模式时停止视频（videojs）

Question

我使用videojs插件来定制一个视频播放器。

我有 30 个模态，每个模态中有一个不同的视频（Youtube、Dailymotion、Vimeo）。

我添加了两个按钮 next/prev 在每个模态之间传递（模态始终打开）。

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

但是我有两个问题：

1. 每次我打开一个新模式时，都会自动播放视频。
2. 当我关闭模式时，视频会继续播放。

对于我的代码摘录，我使用了 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