Question

我从堆栈溢出尝试了几种解决方案，但似乎没有任何效果。如果将视频代码替换为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>

Answer 1

在模态关闭时，使用document.getElementById("video1").pause()暂停视频。或者，使用jQuery，$('#video1').pause()。

Answer 2

您将视频剪切到ng-if内，html被删除，视频停止播放。如果模态上有诸如淡出的动画，请为ng-if variable设置一个超时，以便在动画结束后将其删除。

关闭时停止在模态视频上播放视频

2 个答案: