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視頻播放器

回答

相關問題