模态关闭时停止视频 - Plyr 插件

Question

我使用 Plyr 插件在多个模态中创建了多个视频播放器。一个模态视频。

我正在尝试在当前模式关闭时停止当前视频。

请问有什么帮助吗？

Plyr.setup('.popin__video-container');

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

        function removeModal() {
            modal.removeClass('statut-show');
            overlay.removeClass('statut-show');
        }

        function removeModalHandler() {
            removeModal();
        }

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

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

                var playerPopin = modal.find('.plyr');

                if (!playerPopin.paused) {
                    playerPopin.pause();
                }
            }
        });

    });

Answer 1

尝试将播放器的初始化方法分配给一个变量，然后像这样调用 pause 方法。

let player = Plyr.setup('.popin__video-container');

player.pause();

这就是文档所说的。

Answer 2

设置 plyr 后。每当你使用变量时，它都会给你一个数组来处理。

所以你应该这样做：

            const players = Plyr.setup('.js-player');
            players.forEach(function(player) {
                        player.pause();
            });

或者如果您正在使用 bootstrap 模态：

            const players = Plyr.setup('.js-player');
            $('.myModal').on('hide.bs.modal',function (){

                  players.forEach(function(player) {
                        player.pause();
                  });
            });

你也可以检查这个 link : https://github.com/sampotts/plyr/issues/144

模态关闭时停止视频 - Plyr 插件

Stop video when modal is close - Plyr plugin

javascript

jquery

plyr