twitter-bootstrap 引导视频播放器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21379056/
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 video player
提问by ch.smrutiranjan parida
I want a responsive bootstrap video player and demo so that I know it will work responsively. presently I am using http://html5-ninja.com/preview/index/5#.UYjKBbWouuYbut it doesn't support ie8 and not able to responsive.
我想要一个响应式引导视频播放器和演示，以便我知道它会响应式地工作。目前我正在使用http://html5-ninja.com/preview/index/5#.UYjKBbWouuY但它不支持 ie8 并且无法响应。
I have used it like:
我用过它：
<div class="col-md-8" style="background: wheat">
<div class="form-group">
<div class="videoUiWrapper thumbnail">
<video width="640" height="360" id="vdHotPress">
<source src="http://ia700305.us.archive.org/18/items/CopyingIsNotTheft/CINT_Nik_H264_720.ogv" type="video/ogg" />
<source src="http://ia700305.us.archive.org/18/items/CopyingIsNotTheft/CINT_Nik_H264_720_512kb.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
it's not showing the play n volume buttons image. And also not responsive I mean I have checked with mozilla and attaching the screenshot.
So that you can have an idea.
它没有显示播放 n 音量按钮图像。而且也没有响应我的意思是我已经检查过 mozilla 并附上了屏幕截图。这样你就可以有一个想法。
回答by Tommy42
Here you set the width manually but on mobile the width do not exceed 480px for iPhone for example:
在这里，您手动设置宽度，但在移动设备上，iPhone 的宽度不超过 480 像素，例如：
So you use bootstrap for responsiveness
所以你使用引导程序来响应
<div class="col-md-8" ...>
This will take automatically the good width relative on screen size so you just need to tell to your video to take the full width it needs by:
这将自动采用相对于屏幕尺寸的良好宽度，因此您只需要通过以下方式告诉您的视频采用所需的全宽：
<video width="100%" ...>
And if you want to add controls buttons on your player you just need to add controlsas an attribute:
如果你想在你的播放器上添加控制按钮，你只需要添加controls一个属性：
<video width="100%" id="vdHotPress" controls>
Code be like:
代码如下：
<div class="col-md-8" style="background: wheat">
<div class="form-group">
<div class="videoUiWrapper thumbnail">
<video width="100%" id="vdHotPress" controls>
<!-- set width to 100% and add controls for play and volume buttons-->
<source src="http://ia700305.us.archive.org/18/items/CopyingIsNotTheft/CINT_Nik_H264_720.ogv" type="video/ogg" />
<source src="http://ia700305.us.archive.org/18/items/CopyingIsNotTheft/CINT_Nik_H264_720_512kb.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
You can go here to learn more about HTML5 player options.
您可以转到此处了解有关HTML5 播放器选项的更多信息。
