【问题标题】:Bootstrap 3 - Responsive mp4-videoBootstrap 3 - 响应式 mp4 视频
【发布时间】: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 我下次会这样做。

标签: twitter-bootstrap video twitter-bootstrap-3 responsive-design mp4


【解决方案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-heightmax-width。请参阅demo here
【解决方案2】:

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

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

【讨论】:

  • 类“img-responsive”用于图像而不是视频
【解决方案3】:

这对我有用:

&lt;video src="file.mp4" controls style="max-width:100%; height:auto"&gt;&lt;/video&gt;

【讨论】:

    【解决方案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>
    

    【讨论】:

    • 使用该代码将为您提供具有完全控制权的响应式视频播放器
    • 问题是关于嵌入 HTML5 mp4 视频而不是 youtube 视频
    • 听不到声音!!
    【解决方案5】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-07-21
      • 1970-01-01
      • 1970-01-01
      • 2014-10-13
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多