- 安装组件(要用npm,cnpm要出错哟)
npm install vue-video-player --save
- main.js文件中添加
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)
- 组件中使用
<template>
<div class="video-content">
<div class="video-player-content">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions">
</video-player>
</div>
</div>
</template>
<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
name: "VideoContent",
props:{
url:{
type:String,
default:'',
},
},
data() {
return {
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0],
autoplay: false,
muted: false,
loop: false,
preload: 'auto',
language: 'zh-CN',
aspectRatio: '16:9',
fluid: true,
sources: [{
type: "video/mp4",
src: ''
}],
poster: '',
notSupportedMessage: '此视频暂无法播放,请稍后再试',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true
}
}
}
},
components:{
videoPlayer,
},
mounted() {
this.changeVideoSrc();
},
methods:{
changeVideoSrc(){
this.playerOptions.sources[0]['src'] = 'https://www.liujie006.cn/'+this.url
}
},
}
</script>
<style scoped>
</style>