当引导模式关闭时如何停止html5视频，并在点击播放按钮时再次播放

Question

我有一个页面带有三个html5视频，当用户单击'播放'按钮时，我想以弹出模式播放该视频。我有三个带有三个ID的模式，如myModal1，myModal2和myModal3！以及视频文件动态地来自服务器。我搜索并尝试了很多解决方案，但没有找到一个适合我的工具！有没有人有我的问题的解决方案的想法，这将允许：

• 当用户点击播放按钮，该特定的引导模态视频加载和播放。
• 当用户关闭模式时，视频将停止。
• 当用户重新选择一个视频时，它可以再次播放。

<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">&times;</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>

Answer 1

此代码示例具有三个视频按钮和负载的每一个视频到同一模态引导设置源之后。当模式被激活/隐藏时，它使用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">&times;</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">&times;</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">&times;</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">&times;</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>