jquery - 引导模式关闭后,html5 视频继续在后台播放

标签 jquery html css twitter-bootstrap-3

所以在阅读了这篇文章 ( Twitter Bootstrap Modal stop Youtube video ) 之后,我仍然无法让这个解决方案起作用。我已经尝试了很多其他方法,但仍然没有运气。我想如果我的编码不是那么草率的话,这会起作用。

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

 <!-- 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>

最佳答案

尝试:

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

关于jquery - 引导模式关闭后,html5 视频继续在后台播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35176549/

相关文章:

javascript - 我可以将 2 个骨髓动画序列合并到一个语句中,并且仍然得到相同的结果吗?

jquery - 一个按钮拉伸(stretch),其他是原始大小

javascript - 我无法让所有的 div 都显示相同的#id

html - 如何使用 css 编辑表格中特定单元格的颜色、字体、bg_color

html - li 项将不会按应有的方式显示

javascript - 验证此表单(仅限数字)?

jquery - 如何在使用 JQuery 显示隐藏的 div 时维护 SEO

javascript - 使用 jQuery 在模态上执行 AJAX 功能?

html - 我怎样才能做到不透明样式只影响外部元素而不影响内部元素

javascript - 如何为元素调用 click()?