时间戳

首页 > 解决方案 > 在模态视频外点击后在后台播放

javascript - 在模态视频外点击后在后台播放

问题描述

我在模型中的模型中有一个 iframe，它播放视频，但是当我在模式之外单击时。模态框已关闭，但在后台播放视频。

我的代码：

<div class="modal fade bd-example-modal-lg modalsize col-9 col-xs-12" id="mysliderVideo1" style="padding-top: 80px;">
    <div class="modal-dialog modal-lg">
      <iframe class="video_container embed-responsive-item v_responsive"  height="50"  src="https://youtube.com/embed/<?php echo $page_info[0]['link1']; ?>?rel=0&modestbranding=1&autohide=1&showinfo=0&controls=1&autoplay=1" frameborder="0"  allow="autoplay" allowfullscreen></iframe>
    </div>
</div>

 <section id="gallery" class="bg-lighter">
  <div class="container-fluid pt-70 pb-0">
    <div class="section-content">
      <div class="row">
        <div class="col-md-12">
         <div id="grid" class="gallery-isotope grid-4 gutter clearfix">

       <?php if(!empty($page_info[0]['link1'])){ ?>
       <div class="gallery-item photography" onclick='video_link("<?php echo $page_info[0]['link1']?>",)'>
           <div class="price pt-30">
                <h5 class="text-uppercase letter-space-2"></h5>
           </div>
         <div class="thumb galerryVideoCopy inset">
        <img src="<?php echo 'http://img.youtube.com/vi/'.$page_info[0]['link1'].'/hqdefault.jpg' ?>" data-toggle="modal" data-target="#mysliderVideo1" />
        </div>
        </div>
           <?php } ?>
    </div>
  </div>
</div>
</div>
</div>
</div>
</section>

脚本：

<script>
function video_link(url){
var temp = "https://youtube.com/embed/"+url+"?rel=0&modestbranding=1&autohide=1&showinfo=0&controls=1&autoplay=1";
$('.video_container').attr({
   src: temp 
 });
}
</script>

我希望如果模式关闭，则视频音频需要停止或视频不在后台播放。请帮忙，我不知道我的代码哪里错了。

标签： javascriptphphtmliframebootstrap-modal

解决方案

试试这个：

$('.modal').on('hidden.bs.modal', function () {
    $('.video_container').attr({
      src: '', 
    });
});

希望有所帮助。

推荐阅读