Bootstrap Modal视频播放控制：关闭弹窗时停止视频

<!-- 视频触发链接 -->
<!-- 使用更具描述性的类名 'video-trigger' -->
<a href="#" class="video-trigger" 
   data-video-src="<?php echo $vidpath . $file_mp4_v3;?>" 
   data-toggle="modal" 
   data-target="#videoModal">
   <?php echo $movie_name_v3 ;?>
</a>

<!-- Bootstrap Modal 结构 -->
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="videoModalLabel">视频播放</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body justify-content-center">
                <!-- 推荐使用Bootstrap的响应式嵌入，保持视频比例 -->
                <div class="embed-responsive embed-responsive-16by9"> 
                    <video id="myModalVideo" class="embed-responsive-item" controls autoplay>
                        <!-- source 标签的src属性将由JavaScript动态设置 -->
                        <source src="" type="video/mp4" />
                        您的浏览器不支持HTML5视频。
                    </video>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    var videoModal = $('#videoModal');
    // 获取原生video元素和其内部的source元素
    var modalVideoElement = document.getElementById('myModalVideo'); 
    var videoSourceElement = modalVideoElement.querySelector('source'); 

    // 监听视频触发链接点击事件，加载视频
    $('.video-trigger').on('click', function() {
        var videoSRC = $(this).data("video-src");
        // 动态设置视频源
        videoSourceElement.src = videoSRC;
        modalVideoElement.load(); // 重新加载视频以应用新的src
        // 注意：autoplay属性可能被浏览器限制，可在shown.bs.modal中手动play
    });

    // 监听模态框完全显示事件，确保视频开始播放
    videoModal.on('shown.bs.modal', function () {
        // 确保视频播放，以防autoplay被浏览器限制
        modalVideoElement.play(); 
    });

    // 监听模态框完全隐藏事件
    videoModal.on('hidden.bs.modal', function () {
        // 1. 暂停视频播放
        modalVideoElement.pause();
        // 2. 清空视频源，释放资源
        videoSourceElement.src = '';
        modalVideoElement.load(); // 重新加载以清除当前视频状态
        console.log('视频已停止并清除源。');
    });
});
</script>