Bootstrap视频播放器

Question

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

我用过它：

<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并附上截图。 这样你就可以有一个想法。

Answer 1

您可以手动设置宽度，但在移动设备上，iPhone的宽度不超过480px，例如：     

所以你使用bootstrap来提供响应能力

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

这将自动采用屏幕尺寸相对较好的宽度 因此，您只需告诉您的视频，即可获得所需的全部宽度：

<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的更多信息。