问题分析：Bootstrap Modal中视频的播放行为
当我们在bootstrap modal（模态框）中嵌入视频并播放时，用户关闭模态框后，视频往往不会自动停止，而是继续在后台播放声音。这是因为bootstrap modal的关闭操作默认只是隐藏了模态框及其内容，并没有对内部的媒体元素执行暂停或停止指令。从用户体验的角度来看，这会导致不必要的噪音和干扰；从系统资源的角度来看，视频的持续播放也会占用额外的带宽和cpu资源。因此，实现模态框关闭时视频的自动停止是提升web应用质量的关键一环。
核心解决方案：利用Bootstrap Modal事件控制视频状态
Bootstrap提供了一系列丰富的模态框事件，允许开发者在模态框的不同生命周期阶段执行自定义逻辑。针对视频继续播放的问题，我们可以利用hide.bs.modal或hidden.bs.modal这两个事件来在模态框开始隐藏或完全隐藏后，对内部的视频元素进行操作，使其停止播放。
- hide.bs.modal: 此事件在模态框开始隐藏时立即触发，但在其完全隐藏（包括CSS过渡效果）之前。
- hidden.bs.modal: 此事件在模态框完全隐藏且CSS过渡效果完成后触发。
通常，hidden.bs.modal是更稳妥的选择，因为它确保了模态框已经不可见，此时执行视频停止操作不会有视觉上的冲突，且能更彻底地处理资源。
实现步骤与代码示例
要实现模态框关闭时视频自动停止，我们需要完成以下步骤：
- 获取视频元素引用： 在模态框被打开时，获取当前播放视频的HTML video元素。
- 监听模态框关闭事件： 使用jQuery（或原生JavaScript）监听目标模态框的hidden.bs.modal事件。
- 执行停止逻辑： 在事件触发时，调用视频元素的pause()方法，并可选地清空其src属性，以确保视频完全停止并释放资源。
以下是基于原始代码的优化示例，展示了如何集成这些逻辑：
<!-- 视频触发链接 -->
<!-- 使用更具描述性的类名 '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">×</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>注意事项
- video.pause()与清空src： 仅仅调用modalVideoElement.pause()可以停止视频播放，但视频资源可能仍被浏览器占用。清空source标签的src属性并调用load()方法，可以更彻底地释放资源，尤其是在模态框可能被频繁打开和关闭，且每次播放不同视频的场景下，这是更好的实践。
- autoplay属性： 在某些浏览器或移动设备上，autoplay属性可能受到限制，导致视频不自动播放。为了确保视频在模态框打开时能够播放，可以在shown.bs.modal事件中手动调用modalVideoElement.play()方法。
- 响应式视频： 示例中使用了Bootstrap的embed-responsive类来确保视频在不同屏幕尺寸下的良好显示，这是一种推荐的做法，可以避免手动计算视频宽高。
- 原生JS与jQuery： 尽管代码中混合使用了jQuery和原生JavaScript，但对于video元素的操作，原生JavaScript的API（如pause()、load()、play()）更为直接和高效。
- 多个视频模态框： 如果页面中有多个视频模态框，需要确保每个模态框的事件监听和视频操作是独立的，或者通过参数传递当前操作的模态框和视频元素，避免相互干扰。例如，可以使用$(this)来引用当前触发事件的模态框。
总结
通过利用Bootstrap Modal提供的生命周期事件，特别是hidden.bs.modal，我们能够精确控制模态框内视频的播放状态。这种方法不仅解决了视频在关闭后继续播放的问题，提升了用户体验，也避免了不必要的系统资源占用。在实际开发中，结合视频的pause()方法和动态管理src属性，可以实现高效且用户友好的视频播放功能，从而为用户提供更加流畅和专业的Web应用体验。
