videojs 怎么在控制条上设置“当前时间”和“剩余时间”？

Question

videojs怎么在控制栏上设置“当前时间”和“剩余时间”呢，如下代表，在controlBar里面设置了“currentTimeDisplay”、“durationDisplay” 但是死活不出来，设置“fullscreenToggle”、“volumePanel”都能生效，是跟什么设置冲突了吗？

<template>
  <div class="contianer">
    <video
        ref="videoPlayer"
        id="my-video"
        class="video-js vjs-default-skin"
        controls
        preload="auto"
        poster="//vjs.zencdn.net/v/oceans.png">
    </video>

  </div>
</template>

<script>
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
import 'videojs-contrib-hls'

export default {
  name: 'HelloWorld',
  data () {
    return {
      player: null,
      options: {
        textTrackDisplay: false,
        posterImage: true,
        errorDisplay: false,
        controlBar: {
          currentTimeDisplay: true, // 当前时间
          timeDivider: true, // 时间分割线
          durationDisplay: true, // 总时间
          progressControl: true, // 进度条
          remainingTimeDisplay: false, //
          customControlSpacer: true, //
          fullscreenToggle: true, // 全屏按钮
          volumePanel: false
        },
        sources: [{
          src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
          type: 'video/mp4'
        }]
      }
    }
  },
  mounted () {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady () {
      console.log('onPlayerReady', this)
    })
  },
  beforeDestroy () {
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>

Answer 1

你好，我遇到了相同的问题，请问，你最后解决了嘛？