Bootstrap 引导模式弹出窗口上的视频在关闭后继续播放音频

7bsow1i6 于 2023-10-14 发布在 Bootstrap

关注(0)|答案(3)|浏览(186)

我有一个非常基本的你管视频播放的引导模态弹出窗口。当我按下关闭时，视频本身关闭，但音频继续播放。任何建议都将非常有帮助。谢谢你！

<div class="modal fade" id="tvDebutPlay" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
                                          <div class="modal-dialog2">
                                              <div class="modal-content2">
                                                  <div class="modal-body2">
                                                      <button type="button" class="btn btn-default st-closeBtn" data-dismiss="modal">X</button>
                                                      <div>
                                                          <iframe width="100%" height="480" src=""></iframe>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/28072334/video-on-bootstrap-modal-popup-continues-playing-audio-after-closing

3条答案

按热度按时间

iih3973s1#

它看起来像模态被隐藏，但没有被破坏，所以没有什么可以阻止它在后台播放。你可以用一点jQuery来解决这个问题。
沿着下列路线的东西：

var modal = $('.modal-dialog2');
modal.find('.st-bloseBtn').click(function() {
   modal.remove();
});

如果你需要允许它再次出现，那么我建议你在让文档首先显示它之前创建一个它的克隆（即，在它自动播放之前）

赞(0）回复(0）举报 2023-10-14

4szc88ey2#

感谢您的回复。实际上，我只是用另一种方法让它工作。如果其他人也有类似的问题，我只是添加了这个点击事件，它删除了iframe的源代码：
$（'. st-closeBtn'）.click（function（）{
$（'iframe'）.attr（'src'，''）;
}）;

赞(0）回复(0）举报 2023-10-14

lymgl2op3#

我在一个博客上看到了这个，它工作得很完美（https://medium.com/@webnotes/stop-vimeo-video-playing-in-background-after-bootstrap-modal-close-c076215a8a1b）：
基本上你需要的事件时，模态关闭，并设置src属性为空字符串。事件名称为hidden.bs.modal

$('.modal').on('hidden.bs.modal', function () {
var $this = $(this);
//get iframe on click
var vidsrc_frame = $this.find("iframe");
var vidsrc_src = vidsrc_frame.attr('src');
console.log(`videosrc=` + vidsrc_src)
vidsrc_frame.attr('src', '');
vidsrc_frame.attr('src', vidsrc_src);
});

赞(0）回复(0）举报 2023-10-14

我来回答

Bootstrap 引导模式弹出窗口上的视频在关闭后继续播放音频

3条答案

相关问题

热门标签

最新问答