Chrome將自己的時間軸添加到videojs播放器

我想在我的反應應用程序中使用videojs。我讓它響應，但問題是Chrome向玩家添加了它的時間線（控制條）。我想看看默認的videojs控制欄。這裏是玩家的代碼的jsfiddleChrome將自己的時間軸添加到videojs播放器

<div class="main"> 
    <div class="video-container"> 
    <div class="video-wrapper"> 
<video controls> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
</video> 
</div> 
    </div> 
    <div class="section"> 

    </div> 

</div>

CSS

.main { 
    height: 500px; 
    width: 100%; 
    display: flex; 
} 

.video-container{ 
    background: red; 
    flex: 2; 
    display: flex; 
    align-items: center; 
} 

.section { 
    background: blue; 
    flex: 1; 
} 

.video-wrapper { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
    flex: 1; 
} 

.video-wrapper > video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

https://jsfiddle.net/t1gsrsu5/2/

我該如何解決這個問題？

來源

2017-02-12 ApurvG

從您的視頻標籤中刪除'controls'屬性https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video#attr-controls – Giladd

（你的'controls'屬性是好的。）但是，你需要一個class屬性和一個數據設置屬性，如第二個視頻標籤示例所示：http://docs.videojs.com/docs/guides/setup html的 – Dave

到您的視頻標籤，添加屬性爲 'ID' 和 '階級'，所以它看起來像這樣：

<video id="videoID" class="video-js vjs-default-skin" controls> 
</video>

[見：http://docs.videojs.com/docs/guides/setup.html]

視頻標籤下面，添加一個JavaScript的產品線，是這樣的：

<script type="text/javascript" > 
    var myPlayer = videojs('videoID'); 
</script>

[一旦你點擊默認的「大箭頭」，自動消失videojs控制欄將出現。 ]

最後一個（可選）調整，如果像我一樣，你不喜歡負值的'剩餘時間'，你可以添加一些CSS代碼（在標題中，在以下鏈接到videojs的CSS代碼，將其隱藏和取消隱藏更常用的「時間/持續時間」的信息）：

<style> 
    .video-js .vjs-current-time { display: block; } 
    .video-js .vjs-time-divider { display: block; } 
    .video-js .vjs-duration { display: block; } 
    .video-js .vjs-remaining-time { display: none; } 
</style>

那不是正式記錄任何地方...我想通了這一點，在跌跌撞撞之後：https://github.com/videojs/video.js/issues/2507

來源

2017-02-12 20:42:40 Dave

Chrome將自己的時間軸添加到videojs播放器

回答

相關問題