在bootstrap模式关闭后,html5视频继续在后台播放

时间:2016-02-03 12:03:06

标签: jquery html css css3 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>

1 个答案:

答案 0 :(得分:1)

尝试:

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