Javascript 如何在引导模式关闭时停止html5视频，并在单击播放按钮时重新播放

我有一个包含三个html5视频的页面，当用户单击“播放”按钮时，我希望以弹出模式播放这些视频。我有三个带有三个id的模式，如myModal1、myModal2和myModal3！视频文件动态地来自服务器。我搜索并尝试了许多解决方案，但没有找到一个适合我的！有没有人能想出解决我的问题的办法，使我能够：

• 当用户单击播放按钮时，特定的引导模式视频将加载并播放
• 当用户关闭模式时，视频将停止
• 当用户重新选择视频时，可以再次播放

$（文档）.ready（函数（）{
$（'.winnr'）。在（'click'，function（）上{
var video=document.getElementById（'lotto'）；
var source=document.createElement（'source'）；
setAttribute（'src'，'video/v3.mp4'）；
视频。追加子项（来源）；
video.play（）；
$（“.close”）。单击（函数（）{
video.pause（）；
source.setAttribute（'src'，''）；
}, 3000);	
});
});

播放视频
&时代；

此代码示例有三个视频按钮，并在设置源代码后将每个视频加载到相同的引导模式。当激活/隐藏模式时，它使用引导显示/隐藏事件触发播放和暂停

如果需要，可以在关闭模式时存储每个视频的位置，并在打开时重新搜索到该点（需要一个数组来保存每个视频的每个位置，这样会变得更复杂，但不是很费力-问题只是说重新播放，没有说是否要继续从同一位置播放）

模态视频
视频一
录像二
视频三
//将事件附加到模式
$（文档）.ready（函数（）{
$（“#myModal”）.on（'hide.bs.modal'，function（）{
document.getElementById（“视频”）.pause（）；
console.log（“视频暂停”）；
});
$（“#myModal”）.on（'show.bs.modal'，function（）{
document.getElementById（“视频”）.play（）；
console.log（“视频播放”）；
});
});
//这将加载视频源并以编程方式显示模式
功能模态（v）{
document.getElementById（“视频”）.src=v
$（“#myModal”）.modal（）
}
&时代；
模态视频
接近

这个代码示例有三个按钮，但不是共享一个模型窗口并将视频源注入其中，而是每个按钮触发一个具有相关视频源的不同模式窗口。在相关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>

模态视频
视频一
录像二
视频三
$（文档）.ready（函数（）{
$（“#myModal1”）.on（'hide.bs.modal'，function（）{
document.getElementById（“video1”）.pause（）；
控制台日志（“视频1暂停”）；
});
$（“#myModal1”）.on（'show.bs.modal'，function（）{
document.getElementById（“video1”）.play（）；
控制台日志（“视频1播放”）；
});
$（“#myModal2”）.on（'hide.bs.modal'，function（）{
document.getElementById（“video2”）.pause（）；
控制台日志（“视频2暂停”）；
});
$（“#myModal2”）.on（'show.bs.modal'，function（）{
document.getElementById（“video2”）.play（）；
console.log（“视频2播放”）；
});
$（“#myModal3”）.on（'hide.bs.modal'，function（）{
document.getElementById（“video3”）.pause（）；
控制台日志（“视频3暂停”）；
});
$（“#myModal3”）.on（'show.bs.modal'，function（）{
document.getElementById（“video3”）.play（）；
console.log（“Video3播放”）；
});
});
&时代；
模态视频1
接近
&时代；
模态视频2
接近
&时代；
模态视频3
接近

非常感谢您！我用你的代码重新编译了我的代码，但它对我不起作用！我不知道为什么$（“#myModal”）.on（'hide.bs.modal'，function（）或$（“#myModal”）.on（'show.bs.modal'，function（））对我不起作用？！当我关闭模态视频时，它仍在后台播放！我感到困惑！我有三个按钮，这些按钮的数据目标是用三个模态id设置的。所以我有三个模态id，如myModal1、myModal2、myModal3。re视频仍在播放：模态的

id

是否是模态的

myModal

？如果不是，那么函数将不会附加到t他说得对。当模式打开时，视频会自动播放吗？有三个按钮：你想使用一个模式，还是想定义三个不同的模式弹出窗口，并将每个按钮指定给一个特定的模式？我有三个不同的模式和三个按钮。但是按钮没有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>