Bootstrap视频播放器

我想要一个响应式引导视频播放器和演示，以便我知道它会响应工作。目前我正在使用http://html5-ninja.com/preview/index/5#.UYjKBbWouuY，但它不支持ie8并且无法响应。Bootstrap视频播放器

我已经用它喜欢：

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

它没有显示的播放N音量按钮图像。而且也没有响应我的意思是我已经检查了与Mozilla并附上截图。这样你就可以有一个想法。 Desktop version

Mobile version

来源

2014-01-27 ch.smrutiranjan parida

在这里，您手动，但在移动设置宽度宽度不为iPhone超过480像素例如：

所以你用引导的响应

<div class="col-md-8" ...>

这将自动采用相对于屏幕尺寸的宽度，因此您只需告诉视频采取f ULL宽度需要通过：

<video width="100%" ...>

如果你想在您的播放器添加控件按钮，你只需要添加controls作为一个属性：

<video width="100%" id="vdHotPress" controls>

代码是这样的：

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

你可以去这里了解更多关于HTML5 player options。

来源

2014-11-10 09:23:53 Tommy42

我认为当你为你的内涵添加一些解释时，它会对Op和更多的访问者更有帮助。您可以通过使用帖子下方的“修改”链接来完成此操作。 – reporter

好吧:)感谢您的建议 – Tommy42

Bootstrap视频播放器

回答

相关问题