Bootstrap 3 - 响应式 mp4 视频

Posted 2023-02-16

【中文标题】Bootstrap 3 - 响应式 mp4 视频

【英文标题】：Bootstrap 3 - Responsive mp4-video

【发布时间】：2014-11-20 07:38:21

【问题描述】：

我试图在引导站点上找到一个好的解决方案，但我还没有得到答案。我想我不可能是唯一一个为此苦苦挣扎的人，但我找不到任何对我有帮助的东西。

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

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

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

【问题讨论】：

下次提交错误！现在将是 fixed in v3.2.1.

@cvrebert 我下次会这样做。

【参考方案1】：

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

反应灵敏 允许自动播放和循环播放 使用引导程序

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

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

【讨论】：

这正是我想要的！非常感谢！这对我很有帮助！

在 ie9 和 safari 上测试。两者都可以完美运行，因此您还有其他事情要做。关于 ie8 - doesn't support

这涵盖了整个页面并且是响应式的，但我想要小的高度和宽度。我该怎么做？？

@J4GD33P51NGH 只需更改视频父 div 的 max-height 和 max-width。请参阅demo here。

【参考方案2】：

只需将 class="img-responsive" 添加到视频标签即可。我在一个当前的项目上这样做，它有效。它不需要包裹在任何东西中。

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

【讨论】：

类“img-responsive”用于图像而不是视频

【参考方案3】：

这对我有用：

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

【参考方案4】：

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

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

【讨论】：

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

问题是关于嵌入 html5 mp4 视频而不是 youtube 视频

听不到声音！！

【参考方案5】：

页面上多个视频的提示：我最近解决了一个问题，在发现所有视频的帧速率后，在一个包含 16 个模态视频（引导程序 3）的页面中，在 Chrome 或 Firefox 中没有 mp4 播放（在 IE 中可以正常播放）视频必须相同。我有 6 个 25fps 的视频和 12 个 29.97fps 的视频……在将所有版本渲染为 25fps 后，所有浏览器都运行流畅。