Question

我试图在bootstrap网站上找到一个很好的解决方案，但我还没有得到答案。我想我不可能是唯一一个与此斗争的人，但我找不到任何帮助我的东西。

我正在尝试在我的网站上嵌入一个mp4视频。问题是，如果我使用iframe-tag，我就不能使用自动播放和循环。因此，我想用视频标签（或其他支持自动播放和循环的东西）来解决它。之后，我尝试使用对象标签响应视频，但这不起作用。即使我在我的代码（告诉你）中让它出现在下面你可以看到：

<div align="center">
   <object class="embed-responsive-item">
     <video autoplay loop >
       <source src="file.mp4" />
     </video>
   </object>
 </div>

我希望你们中的任何人都可以帮我解决这个问题。

Answer 1

据我了解，您希望在您的网站上嵌入视频：

有回应
允许自动播放和循环
使用Bootstrap

这Demo Here就是这么做的。您必须根据instructions here在object / embed / iframe标记之外放置另一个嵌入类 - 但是您也可以使用视频标记而不是对象标记，即使它是＆＃39;未指定。

<div align="center" class="embed-responsive embed-responsive-16by9">
    <video autoplay loop class="embed-responsive-item">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    </video>
</div>

Answer 2

只需在视频代码中添加class =“img-responsive”即可。我在当前的项目中这样做，它的工作原理。它不需要包装在任何东西中。

gem install bundler

Answer 3

使用该代码将为您提供具有完全控制权的响应式视频播放器

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" width="640" height="480" src="https://www.youtube-nocookie.com/embed/Lw_e0vF1IB4" frameborder="0" allowfullscreen></iframe>
</div>

Answer 4

这对我有用：

<video src="file.mp4" controls style="max-width:100%; height:auto"></video>

Answer 5

页面上的多个视频提示：我发现了所有的帧速率后，我在Chrome或Firefox（在IE中播放得很好）的页面中找到了16个视频模式（bootstrap 3）中没有mp4播放的问题视频必须完全相同。我有25个视频的6个视频和29.97fps的12个视频...在渲染到25fps版本之后，所有浏览器都能顺利运行。

Bootstrap 3 - 响应式mp4视频

5 个答案: