Chrome добавляет свою собственную временную шкалу к плееру videojs

Question

Я пытаюсь использовать videojs в своем приложении-ответе. Я сделал его отзывчивым, но проблема в хром добавляет, что это временная шкала owm (панель управления) для проигрывателя. Я хочу увидеть панель управления по умолчанию videojs. Вот код и jsfiddle игрока

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

Как я могу решить эту проблему?

Answer 1

К вашему видео тег, добавить атрибуты 'идентификатор' и 'класс', так это выглядит, как этого:

<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 ControlBar появится. ]

Последняя (дополнительная) настройка, если мне нравится, вам не нравится отрицательное значение «оставшееся время», вы можете добавить код CSS (вверху в заголовке, чуть ниже ), ваша ссылка на CSS-сайт videojs код, чтобы скрыть это и отобразите более-широко используемых «время/продолжительность» данные):

<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