在 twitter bootrap 中禁用视频自动播放并在模式关闭时停止视频答案

【问题标题】：disable video autoplay in twitter bootrap and stop video when modal is closed在 twitter bootrap 中禁用视频自动播放并在模式关闭时停止视频
【发布时间】：2014-11-18 07:39:00
【问题描述】：

我正在使用 Bootstrap 3 将本地视频嵌入到我的页面中

我在模态中使用这段代码

    <div class="embed-responsive embed-responsive-16by9">        
    <iframe class="embed-responsive-item" height="300" width="480"        
    src="hunnybunny.mp4"></iframe></div>

如何防止此视频自动播放？我还希望在模态窗口关闭时停止视频。

【问题讨论】：

也许看看<video>标签和它的属性？
可能重复Bootstrap Modals & Youtube: Autoplay and Stop on Close

标签： javascript twitter-bootstrap video

【解决方案1】：

我遇到了这个问题并找到了解决方法。将 iframe 拖放到 html 中，例如：（注意：我想要左边的视频，所以我把它放在前 7 列的一行中，“class= left_vid”也在我的“覆盖”自定义链接样式表中定义）

<div class="row">
        <div class="col-md-7">
           <video controls class= left_vid> <source src="vid.mp4" type="video/mp4">
        This browser does not display this video type </video>
        </div>
        <div class="col-md-5">
           <p> Text stuff </p>
        </div>
</div>

在 style.css 中

.left_vid {
    display:block;
    margin-left:auto;
    margin-right:auto;
    width: 80%;
    height:auto;
 }

【讨论】：

【解决方案2】：

是否需要为此使用 iframe？如果没有查看 HTML5 视频标签： http://www.w3schools.com/html/html5_video.asp

你正在使用iframe，你不能停止播放，你只能像这样删除元素

$('#myModal').on('hidden.bs.modal', function () {
  $( ".embed-responsive-16" ).remove();
})

这只是一个例子，我们没有你所有的代码:(

【讨论】：