Question

我正在尝试在我的反应应用程序中使用videojs。我让它响应但问题是chrome将它的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

在视频广告代码中添加＆＃39; id＆＃39;和＆＃39; class＆＃39;，所以它看起来像这样：

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

[点击默认的＆＃39;大箭头＆＃39;后，会出现一个自动消失的videojs controlBar。 ]

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

<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

Chrome将自己的时间轴添加到videojs播放器中

1 个答案: