Javascript 关闭模式视频时停止播放视频

我从堆栈溢出中尝试了几种解决方案，但似乎没有任何效果。如果用iframe替换视频标签，一些解决方案似乎可以工作，但视频会再次自动播放并破坏解决方案

    <div class="icon">
  <a>
  <button class="btn btn-link" data-target="#myModal" data-toggle="modal" type="button"><img src="https://sguru.org/wp-content/uploads/2018/02/YouTube.png" alt="" class="img-sm">&nbsp;&nbsp;&nbsp;&nbsp;Click Here to Watch Training Video</button>
   </a>                                                                                                                                                                                  
</div>
<div aria-hidden="true" aria-labelledby="modal-sample-label" class="modal theme-alt modal-center-vertical" id="modal-sample" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-sample-label">Video</h4>
            </div>
            <div class="modal-body">
                <video controls="" id="video1" style="width: 100%; height: auto; margin:0 auto; frameborder:0;">
                    <source src="video.mp4" type="video/mp4">
                    Your browser doesn't support HTML5 video tag
                </video>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info" data-dismiss="modal" type="button">Close</button>
            </div>
        </div>
    </div>
</div>

单击此处观看培训视频
视频
您的浏览器不支持HTML5视频标记
接近

使用

document.getElementById（“video1”）.pause（）

在模式关闭时暂停视频。或者，使用jQuery，

$（“#video1”）.pause（）

将视频剪切到

ng中，如果
，html被删除，视频停止播放。如果在模式上有一些动画，如淡出，请为
ng If变量设置超时，以便在动画完成后将其删除