【问题标题】:html5 video keeps playing in background after bootstrap modal closes引导模式关闭后,html5 视频继续在后台播放
【发布时间】:2016-05-12 14:53:28
【问题描述】:

所以在阅读了这篇文章 (Twitter Bootstrap Modal stop Youtube video) 之后,我仍然无法让这个解决方案发挥作用。我试过verious其他方法,但仍然没有运气。我想如果我的编码不是那么草率,这将是可行的。

任何帮助将不胜感激谢谢大家..

 <!-- Item line a tin -->
    <div class="col-md-4 col-sm-4">

           <h3 >How Line a Tin</h3>
           <a class="vid-lib"><p><button data-toggle="modal"  href="#video-player" onclick="return false;"  class="btn btn-primary btn-large"><span><img src="vid/thumb/line_tin.jpg" style="width:100%;"/></span></button></p></a>

       <div id="video-player" class="modal fade" style="display: none;">
         <div class="video-content">

         <div class="video-header">
            <a class="close" data-dismiss="modal" style="color: #000000;">X close</a>
            <h3 style="color:#f20573;"><span><img src="img/ask_helen.png" style="width:15%;"/></span> How to Line a tin</h3>
        </div>

        <div class="video-body">
         <iframe width="1000" height="600" style="margin: 0 auto;" src="https://www.youtube.com/embed/LtznQ3XI280" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="video-footer">
            <p>&copy; 2015 Fashionable Fondants. All Rights Reserved</p>
        </div>
        </div>
        </div>
           <a  href="vid/line_tins.mp4" download="Linning_a_tin" class="btn" style="margin: auto;">Download Tutorial</a>
    </div> <!-- End Item  -->

    <script> jQuery(".modal-backdrop, #video-player .close, #video-player .btn").live("click", function() { jQuery("#video-player iframe").attr("src", jQuery("#video-player iframe").attr("src")); }); </script>

【问题讨论】:

  • 我遇到了这个问题,我的解决方案是在模式关闭时移除播放器,并在模式打开时添加它
  • 你真的在使用live()???哪个jq版本?控制台出错?
  • @A.Wolf- 我正在使用“code.jquery.com/jquery-1.9.1.js”。我还要将 live() 更改为 on() 吗?

标签: jquery html css twitter-bootstrap-3


【解决方案1】:

试试:

$('#video-player').on('hide.bs.modal', function () {
  $('.video-body iframe')[0].contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*'); 
})

【讨论】:

  • 谢谢你,不幸的是它仍然没有影响。将脚本放在哪里的最佳实践,在其他帖子中他们说在 body 中,但后来有人说将它放在 head 中。感谢您的快速回复
  • 太棒了!谢谢你的负载。我从未更改过您提供的脚本中的 id :-)。
猜你喜欢
  • 2023-03-13
  • 2012-02-05
  • 1970-01-01
  • 2014-12-17
  • 1970-01-01
  • 2013-07-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多