即使在 laravel 中关闭模态后，视频也会继续播放

Question

我正在尝试制作一个流程，其中一旦点击视频，视频将在模态中播放，并且在模态关闭时视频将暂停。但是即使我关闭模态，视频也会继续播放。我的代码是：

<div class="modal fade aspire-video-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="padding-top: 37px;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <!-- 16:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="" id="video"  
                    allowscriptaccess="always" allow="autoplay"></iframe>
                </div>
            </div>
            <div class="modal-footer col-1 align-self-center">
                <button type="button" class="btn btn-secondary aspire-video-close" data- 
                dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

脚本代码是：

$(document).ready(function(){
    $(document).on('click', '.video-btn', function(){
        event.preventDefault();

        let id = $(this).data('id');

        console.log(id);
        $.ajax({
            url: "/watchvideo/"+id,
            dataType:"json",
            success:function(getVideo){
                var d = getVideo.video_link;
                console.log(d);
                $('#video').html(getVideo.video_link);
                // $("#video").attr('src',$getVideo.video_link);
                $("#video").attr("src", d+"? 
                autoplay=1&modestbranding=1&showinfo=0");

                $('#myModal').modal('show');
            }
        })
    });

    $("#myModal").on('hidden.bs.modal', function (e) {
        $("#video").pause();
    });
});

Answer 1

您似乎正在使用 Bootstrap。这是我在我的网站上工作的 YouTube 模式，它可能会对你有所帮助。尝试实现它。

模态 HTML

<div id="myModal" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="background-color: transparent; border:none;">
            <div class="modal-header p-0 m-0" style="background-color: transparent!important;border:none!important;">
                <button type="button" class="close pr-3" data-dismiss="modal" style="color:white;">&times;</button>
            </div>
            <div class="modal-body p-0" style="background-color: transparent;">
                <div class="embed-responsive embed-responsive-16by9" style="border-radius: 10px;width:100%;max-width:900px;">
                    <iframe id="dash-video"
                    src="https://www.youtube.com/embed/QDVLMegSnBQ" 
                    title="YouTube video player" frameborder="0" 
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
                    </iframe>
                </div>
            </div>
        </div>
    </div>
</div>

脚本

 $(document).ready(function(){
            
            // -- script to stop the video from playing when closing modal ---
            var url = $("#dash-video").attr('src');
            
            $("#myModal").on('hide.bs.modal', function(){
                $("#dash-video").attr('src', '');
            });
            
            $("#myModal").on('show.bs.modal', function(){
                $("#dash-video").attr('src', url);
            });
 });

注意1：将此代码置于</body>标签之前的末尾。

注意 2：也许可以在我的视频中试一试，然后进行必要的调整以显示您的视频。