vue-video-player设置进度条控件
时间: 2023-05-23 12:07:28 浏览: 850
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
A:
可以使用`vue-video-player`的`options`属性进行配置。具体步骤如下:
1. 安装`vue-video-player`
```bash
npm install vue-video-player --save
```
2. 在`main.js`中引入`vue-video-player`
```javascript
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)
```
3. 在组件中使用`vue-video-player`
```vue
<template>
<div class="video-player-container">
<video-player ref="videoPlayer"
:options="videoOptions"
@play="onPlayerPlay"
@pause="onPlayerPause">
</video-player>
</div>
</template>
```
4. 配置进度条控件
```javascript
data () {
return {
videoOptions: {
controls: true,
// 配置进度条控件
controlBar: {
totalTimeDisplay: true,
currentTimeDisplay: true,
timeDivider: true,
durationDisplay: true,
progressControl: true
}
}
}
}
```
以上是`vue-video-player`设置进度条控件的基本步骤和示例代码,可以根据具体需要进行调整和修改。
阅读全文