模式窗口已关闭，但视频仍在播放。我想在模式窗口关闭时停止视频。
我尝试了不同的方式，使用YouTube视频和Vimeo可以正常工作，但不能用于MP4。
$(document).ready(function() {
var $videoSrc;
$(".video-btn").click(function() {
$videoSrc = $(this).data("src");
});
console.log($videoSrc);
$("#myModal").on("shown.bs.modal", function(e) {
$("#video").attr(
"src",
$videoSrc + "?autoplay=1&modestbranding=1&showinfo=0"
);
});
$("#myModal").on("hide.bs.modal", function(e) {
$("#video").attr("src", $videoSrc);
});
});<html>
<head>
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<img src="https://tinyjpg.com/images/social/website.jpg?v=1&quality=80&format=jpeg" class="video-btn" data-toggle="modal" data-src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" data-target="#myModal">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video" allow="autoplay"></iframe>
</div>
</div>
</body>
</html>在模式隐藏时，您再次添加视频源，因为$videoSrc变量保留了视频链接。您应该在隐藏状态下删除视频源。
工作示例。
$(document).ready(function() {
var $videoSrc;
$(".video-btn").click(function() {
$videoSrc = $(this).data("src");
});
$("#myModal").on("shown.bs.modal", function(e) {
$("#video").attr(
"src",
$videoSrc + "?autoplay=1&modestbranding=1&showinfo=0"
);
});
$("#myModal").on("hide.bs.modal", function(e) {
$("#video").attr("src", "");
});
});<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<img src="https://tinyjpg.com/images/social/website.jpg?v=1&quality=80&format=jpeg" class="video-btn" data-toggle="modal" data-src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" data-target="#myModal">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video" allow="autoplay"></iframe>
</div>
</div>
</body>
</html>关闭模型时，它不会呼叫播放器停止播放视频。您可以在模型关闭按钮中添加onclick="javascript::player.api('pause')"。
<button type="button" onclick="javascript::player.api('pause')" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button
它将解决您的问题。