twitter-bootstrap 模式关闭时停止播放视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33474638/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop Video From Playing When Modal Closes
提问by cpalmer
I'm using the video tag in HTML that opens in a modal. Currently it is still playing if I exit the modal without pausing the video. I have no javascript yet, as everything I add doesn't work. I'm using bootstrap also. Here is my HTML:
我在 HTML 中使用以模式打开的视频标签。目前，如果我在不暂停视频的情况下退出模态，它仍在播放。我还没有 javascript，因为我添加的所有内容都不起作用。我也在使用引导程序。这是我的 HTML：
<button type="button" data-toggle="modal" data-target="#myModal">
<h4>SHORT SLEEVED SHIRT<br><br></h4>
<img src="images/femaleshortsleeved.jpg"> </button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<video class="video" width="960px" controls>
<source src="images/Short Sleeved Shirt.mp4" type="video/mp4">
</video>
<h2>Short Sleeved Shirt<br></h2>
<h5>90s lightweight brown patterned shirt.<br>No marked size.<br>Will fit S to M.<br>Length: 62cm<br>Width: 56cm</h5>
<button type="button" class="btn btn-primary btn-lg">BUY NOW</button>
</div>
</div>
</div>
回答by Goran Mottram
Use the hidden.bs.modalevent.
使用hidden.bs.modal事件。
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
当模态完成对用户隐藏时会触发此事件（将等待 CSS 转换完成）。
$(function(){
$('#myModal').modal({
show: false
}).on('hidden.bs.modal', function(){
$(this).find('video')[0].pause();
});
});
回答by Bob
I hope this Plunkermight help you, I used the same to get the solution.
我希望这个Plunker可以帮助你，我用它来获得解决方案。
HTML: Autostop Videos in Closed Modal
HTML：封闭模式中的自动停止视频
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Autostop Videos in Closed Modal</h1>
<ul class="nav" >
<li><a href="#" data-toggle="modal" data-target="#video1">Video 1</a></li>
<li><a href="#" data-toggle="modal" data-target="#video2">Video 2</a></li>
</ul>
<div class="modal fade" id="video1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Video 1</h4>
</div>
<div class="modal-body">
<iframe src="//player.vimeo.com/video/108792063" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="modal fade" id="video2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Video 2</h4>
</div>
<div class="modal-body">
<iframe src="//player.vimeo.com/video/69593757" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
JS:
JS：
$(function(){
$('.modal').on('hidden.bs.modal', function (e) {
$iframe = $(this).find("iframe");
$iframe.attr("src", $iframe.attr("src"));
});
});
回答by Szu.W
Without adding any JS, you can just write a simple onclick action to pause your video when the user close the modal.
无需添加任何 JS，您只需编写一个简单的 onclick 操作即可在用户关闭模式时暂停您的视频。
onclick="document.getElementById('demoVideo').pause();"
remember to change 'demoVideo'to your own #VideoID.
记得改成'demoVideo'自己的#VideoID。
Complete code :
完整代码：
<a href="#myVideo"data-toggle="modal" onclick="document.getElementById('demoVideo').play();">--> Watch Video</a>
<!-- Modal -->
<div id="myVideo" class="modal fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
onclick="document.getElementById('demoVideo').pause();">×</button>
<h4 class="modal-title">Demo Video</h4>
</div>
<div class="modal-body">
<video id="demoVideo" width="560" height="315" controls >
<source src="images/mydemovideo.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
*remember to change the srcto your video's.
*记得将 更改src为您的视频。
回答by jins
First add a id to your video player like
首先向您的视频播放器添加一个 ID，例如
<video width="700" height="400" controls="controls" preload="auto" autoplay="true" id="myPlayer" name="myPlayer">
//codes..
</video>
Then add following code to close event of modal
然后添加以下代码关闭模态事件
document.getElementById("myPlayer").pause();
document.getElementById("myPlayer").currentTime = 0;
