twitter-bootstrap Bootstrap 3 - 响应式 mp4 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26040136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - Responsive mp4-video
提问by BRsmover
I tried to find a good solution on the bootstrap site but I didn't get an answer to this yet. I think I can't be the only one struggling with this, but I couldn't find anything that helped me.
我试图在引导站点上找到一个好的解决方案，但我还没有得到答案。我想我不可能是唯一一个为此苦苦挣扎的人，但我找不到任何对我有帮助的东西。
I'm trying to embed an mp4-video on my website. The problem is, that if I use an iframe-tag I can't use autoplay and loop. Because of that I would like to solve it with a video tag (or something else that supports autoplay and loop). After that I tried to make my video responsive with an object-tag but this didn't work. Even though I let it in my code (to show you) which you can see below:
我正在尝试在我的网站上嵌入 mp4 视频。问题是，如果我使用 iframe-tag，我将无法使用自动播放和循环播放。因此，我想用视频标签（或其他支持自动播放和循环的东西）来解决它。之后，我尝试使用对象标签使我的视频响应，但这不起作用。即使我把它放在我的代码中（向你展示），你可以在下面看到：
<div align="center">
<object class="embed-responsive-item">
<video autoplay loop >
<source src="file.mp4" />
</video>
</object>
</div>
I hope anyone of you can help me fix this.
我希望你们中的任何人都可以帮助我解决这个问题。
回答by Schybo
It is to my understanding that you want to embed a video on your site that:
据我了解，您希望在您的网站上嵌入视频：
- Is responsive
- Allows both autoplay and loop
- Uses Bootstrap
- 有反应
- 允许自动播放和循环播放
- 使用 Bootstrap
This Demo Heredoes just that. You have to place another embed class outside of the object/embed/iframe tag as per the the instructions here- but you're also able to use a video tag instead of the object tag even though it's not specified.
这个Demo Here就是这样做的。您必须按照此处的说明在object/embed/iframe 标签之外放置另一个嵌入类- 但您也可以使用 video 标签而不是 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>
回答by Allan Clayton
Simply add class="img-responsive" to the video tag. I'm doing this on a current project, and it works. It doesn't need to be wrapped in anything.
只需将 class="img-responsive" 添加到视频标签即可。我正在当前的项目中执行此操作，并且有效。它不需要包裹在任何东西中。
<video class="img-responsive" src="file.mp4" autoplay loop/>
回答by Zama Sparlay
using that code wil give you a responsive video player with full control
使用该代码将为您提供具有完全控制权的响应式视频播放器
<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>
回答by Hein van Dyke
This worked for me:
这对我有用：
<video src="file.mp4" controls style="max-width:100%; height:auto"></video>
<video src="file.mp4" controls style="max-width:100%; height:auto"></video>
回答by T Gorle
Tip for MULTIPLE VIDEOS on a page: I recently solved an issue with no mp4 playback in Chrome or Firefox (played fine in IE) in a page with 16 videos in modals (bootstrap 3) after discovering the frame rates of all the videos must be identical. I had 6 videos at 25fps and 12 at 29.97fps... after rendering all to 25fps versions, everything runs smooth across all browsers.
页面上多个视频的提示：我最近在发现所有视频的帧速率必须是完全相同的。我有 6 个 25fps 的视频和 12 个 29.97fps 的视频……在全部渲染到 25fps 版本后，所有浏览器都运行流畅。
