Bootstrap 3 - 响应式mp4视频

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

这个演示就是这样做的.您必须按照此处的说明在 object/embed/iframe标记之外放置另一个embed类- 但即使未指定,您也可以使用视频标记而不是object标记.

<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"即可.我在当前的项目中这样做,它的工作原理.它不需要包装在任何东西中.

<video class="img-responsive" src="file.mp4" autoplay loop/>

Answer 3

这对我有用：

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

Answer 4

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

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