admin管理员组文章数量:1391999
Modal window is closed, but the video keeps playing. I want to stop video when the modal window is closed.
I tried different ways, with a YouTube video and Vimeo it's work, but it's doesn't with 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=".4.1/css/bootstrap.min.css">
<script src=".4.1.slim.min.js"></script>
<script src=".4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<img src=".jpg?v=1&quality=80&format=jpeg" class="video-btn" data-toggle="modal" data-src=".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>Modal window is closed, but the video keeps playing. I want to stop video when the modal window is closed.
I tried different ways, with a YouTube video and Vimeo it's work, but it's doesn't with 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./bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery./jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<img src="https://tinyjpg./images/social/website.jpg?v=1&quality=80&format=jpeg" class="video-btn" data-toggle="modal" data-src="https://sample-videos./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>3 Answers
Reset to default 2On modal hide you again adding the video source, as the $videoSrc variable holds the video link. You should remove the video source on hide.
Working Example.
$(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", ""); // Remove the video source.
});
});<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery./jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<img src="https://tinyjpg./images/social/website.jpg?v=1&quality=80&format=jpeg" class="video-btn" data-toggle="modal" data-src="https://sample-videos./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>When you close the model, it does not call the player to stop playing the video. You can you add onclick="javascript::player.api('pause')" in your model close button.
<button type="button" onclick="javascript::player.api('pause')" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button
It should resolve your issue.
$("#myModal").on("hidden.bs.modal", function (e) {
$("#myModaliframe").attr("src", $("#myModaliframe").attr("src"));
});
本文标签： javascriptVideo still playing when bootstrap modal closesStack Overflow
版权声明：本文标题：javascript - Video still playing when bootstrap modal closes - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744774643a2624552.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论