当引导模式关闭时如何停止html5视频,并在点击播放按钮时再次播放
问题描述:
我有一个页面带有三个html5视频,当用户单击'播放'按钮时,我想以弹出模式播放该视频。我有三个带有三个ID的模式,如myModal1,myModal2和myModal3!以及视频文件动态地来自服务器。我搜索并尝试了很多解决方案,但没有找到一个适合我的工具!有没有人有我的问题的解决方案的想法,这将允许:当引导模式关闭时如何停止html5视频,并在点击播放按钮时再次播放
- 当用户点击播放按钮,该特定的引导模态视频加载和播放。
- 当用户关闭模式时,视频将停止。
- 当用户重新选择一个视频时,它可以再次播放。
<script>
$(document).ready(function() {
\t
\t \t $('.winnr-ply').on('click', function(){
\t var video = document.getElementById('lotto');
var source = document.createElement('source');
source.setAttribute('src', 'video/v3.mp4');
video.appendChild(source);
video.play();
$(".close").click(function() {
video.pause();
source.setAttribute('src', '');
}, 3000); \t
\t });
\t
});
</script>
<button class="winnr-ply winner-videos" data-toggle="modal" data-target="#myModal2">play video</button>
<div id="myModal2" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog my-dialog" role="document">
<div class="modal-content winner-v">
<div class="modal-header lg-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body lg-body">
<video id="video1" width="500px" height="400px" controls >
\t <source src="video/v3.mp4" type="video/mp4">
</video>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
\t \t \t \t \t </div>
答
此代码示例具有三个视频按钮和负载的每一个视频到同一模态引导设置源之后。当模式被激活/隐藏时,它使用Bootstrap显示/隐藏事件来触发播放和暂停。
如果你想要的话,你可以存储每个视频在关闭模式时的位置,如果它打开了,重新寻找该位置(需要一个数组来保存每个视频的每个位置,这样会变得更复杂一些,但不是一个巨大的努力 - 这个问题刚才说重起,如果你想继续从相同位置打)
<div class="container">
<h2>Modal Videos</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" onclick="modal('v1.mp4')">Video One</button>
<button type="button" class="btn btn-info btn-lg" onclick="modal('v2.mp4')">Video Two</button>
<button type="button" class="btn btn-info btn-lg" onclick="modal('v3.mp4')">Video Three</button>
<script>
// attach the events to the modal
$(document).ready(function(){
$("#myModal").on('hide.bs.modal', function() {
document.getElementById("video").pause();
console.log("Video paused");
});
$("#myModal").on('shown.bs.modal', function() {
document.getElementById("video").play();
console.log("Video play");
});
});
// this will load the video source and show the modal programmatically
function modal(v){
document.getElementById("video").src = v
$("#myModal").modal()
}
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Video</h4>
</div>
<div class="modal-body">
<video id="video" controls >
</video>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
此代码示例中有三个按钮并没有说,而不是分享模型窗口和注入视频源,每个按钮触发一个不同的模式窗口,它具有相关的视频源。视频播放和暂停每个模态窗口在事件控制了相关myModal1/myModal2/myModal3 DIV/ID
<div class="container">
<h2>Modal Videos</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Video One</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Video Two</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal3">Video Three</button>
</div>
<script>
$(document).ready(function(){
$("#myModal1").on('hide.bs.modal', function() {
document.getElementById("video1").pause();
console.log("Video1 paused");
});
$("#myModal1").on('shown.bs.modal', function() {
document.getElementById("video1").play();
console.log("Video1 play");
});
$("#myModal2").on('hide.bs.modal', function() {
document.getElementById("video2").pause();
console.log("Video2 paused");
});
$("#myModal2").on('shown.bs.modal', function() {
document.getElementById("video2").play();
console.log("Video2 play");
});
$("#myModal3").on('hide.bs.modal', function() {
document.getElementById("video3").pause();
console.log("Video3 paused");
});
$("#myModal3").on('shown.bs.modal', function() {
document.getElementById("video3").play();
console.log("Video3 play");
});
});
</script>
<!-- Modal #1-->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Video1</h4>
</div>
<div class="modal-body">
<video id="video1" controls>
<source src="BigBuck.m4v">
</video>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal #2-->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Video2</h4>
</div>
<div class="modal-body">
<video id="video2" controls>
<source src="BigBuck.m4v">
</video>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal #3-->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Video3</h4>
</div>
<div class="modal-body">
<video id="video3" controls>
<source src="BigBuck.m4v">
</video>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
太谢谢你了!我repalce我的代码以你的,但它并不适用于工作我 !我不知道为什么$(“#myModal”)。on('hide.bs.modal',function()或$(“#myModal”)。on('shown.bs.modal',function()为我工作?!当我关闭模态视频仍然在后台播放!im confused! – mavis
我有三个按钮,其中thode数据目标设置为三个模态id .so我有三个模态id,如myModal1,myModal2,myModal3。 – mavis
还在播放视频:是你的模式'myModal'的'ID'吗?如果不是,那么该功能将不会附加到正确的位置。当模式打开时,视频是否自动播放? – Offbeatmammal