videojs怎么在控制栏上设置“当前时间”和“剩余时间”呢,如下代表,在controlBar里面设置了“currentTimeDisplay”、“durationDisplay” 但是死活不出来,设置“fullscreenToggle”、“volumePanel”都能生效,是跟什么设置冲突了吗?
```
<template>
<div class="contianer">
<video ref="videoPlayer" id="my-video" class="video-js vjs-default-skin" controls></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: true, //
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 () {})
}
}
}
</script>
```
相关分类