作者:佳麟钧君怡慧_481 | 来源:互联网 | 2022-03-10 02:28
本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,具体内容如下
1、安装
npm insta
本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,具体内容如下
1、安装
npm install vue-video-player -save
2、在main.js中添加
import VueVideoPlayer from 'vue-video-player' // 视频播放器
import 'video.js/dist/video-js.css'
Vue.use(VueVideoPlayer)
3、新建一个vueVideoPlayer.vue组件供调用
export default {
name: 'vueVideoPlayer',
props: {
src: {
type: String
},
cover_url: {
type: String
}
},
data () {
return {
// 配置信息
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在
4、在其他组件调用
import vueVideoPlayer from './module/vueVideoPlayer'
// 不要忘记注册
components: {
vueVideoPlayer
}
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。