Javascript Chrome添加它'；s自己的时间线到videojs播放器

我正在尝试在react应用程序中使用videojs。我让它反应灵敏，但问题是chrome将它的owm时间线（控制栏）添加到播放器中。我想查看默认的videojs控制栏。下面是播放器的代码和JSFIDLE

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

---

如何解决这个问题？

在视频标签中添加“id”和“class”属性，使其看起来像 这：

[见：]

在视频标签下面，添加一行javascript，如下所示：

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

var myPlayer=videojs（'videoID'）；

[单击默认的“大箭头”后，将出现自动消失的videojs控制栏。]

最后一个（可选）调整，如果像我一样，你不喜欢负值的“剩余时间”，你可以添加一些CSS代码（在标题上，就在下面） 你的链接到videojs的CSS代码，隐藏它并 取消隐藏更常用的“时间/持续时间”信息：

.video js.vjs当前时间{display:block；}
.video js.vjs分时器{display:block；}
.video js.vjs持续时间{display:block；}
.video js.vjs剩余时间{显示：无；}

---

这在任何地方都没有正式记录……我发现，在遇到以下问题后：

从视频标记中删除

控件

属性（您的“控件”属性很好）。但是，您确实需要一个class属性和一个data setup属性，如第二个视频标记示例所示：

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

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

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