1、在index.html中引入ckplayer.js
<script src="ckplayer/ckplayer.js" charset="utf-8"></script>
资源放在public路径下:
点击视频播放按钮,弹框播放,效果图如下:如果需要支持进度条快进后退,后台接口需要使用断点续传
调用组件代码:
<!--组件调用示例-->
<template>
<div>
<div style=" margin-left: 20px;margin-top: 20px; ">
<el-button @click="dialogVisible=true" >视频播放</el-button>
</div>
<!--视频播放弹框-->
<el-dialog :visible.sync="dialogVisible" @close="closeVideo" title="视频播放" width="50%" top="4vh" :lock-scroll="false" :append-to-body="true"
:close-on-click-modal="false" :show-close="true">
<!--视频方式一 推荐-->
<ckplayer-comp ref="videoComp" :poster="poster" :videoUrls="videoUrls" :autoPlay="autoPlay"></ckplayer-comp>
</el-dialog>
</div>
</template>
<script>
import CkplayerComp from "../../components/videocompent/ckplayerComp";
export default {
name: 'home',
components: {CkplayerComp},
data() {
return {
dialogVisible: false,
compStyle:'width: 482px',
size:'small',
img: '',
width: '50%',//视频弹框的宽度
autoPlay: true,//视频打开是否自动播放
poster: '',//视频封面图片
videoUrls: [
['http://localhost:9999/sky-rxy-web/common/player', 'video/mp4', '进度条播放', 1],
['http://localhost:9999/sky-rxy-web/common/getVideo', 'video/mp4', '普通播放', 0]
] ,//视频地址
sources:[{
src: 'http://localhost:9999/sky-rxy-web/common/getVideo', // 路径
type: 'video/mp4' // 类型
}, {
src: './test.webm',
type: 'video/webm'
}]
}
},
computed: {},
created() {
},
methods: {
closeVideo() {
//父组件调用子组件的方法
this.$refs.videoComp.pauseVideo()
}
}
}
</script>
ckplayerComp.vue:
<!--ckplayer 视频播放-->
<template>
<div id="video"></div>
</template>
<script>
export default {
name: 'ckplayerComp',
props: ['videoUrls','autoPlay','poster'],
data () {
return {
player: ''
}
},
watch: {
videoUrls: {
handler(newVideoUrls, VideoUrls) {
this.initVideo(newVideoUrls,this.autoPlay);
},
immediate: true
}
},
mounted: function(){
this.initVideo(this.videoUrls,this.autoPlay);
},
methods:{
pauseVideo() {
//暂停
this.player.videoPause();
// videoPause playOrPause
},
initVideo(videoUrls,autoPlay) {
// 挂载完成后进行
var videoObject = {
container: '#video', //容器的ID或className
variable: 'player', //播放函数名称
autoplay:autoPlay,//自动播放
loaded: 'loadedHandler', //当播放器加载后执行的函数
loop: false, //播放结束是否循环播放
cktrack: '', //字幕文件
poster: '', //封面图片
preview: { //预览图片
file: ['', ''],
scale: 2
},
config: '', //指定配置函数
debug: true, //是否开启调试模式
drag: 'start', //拖动的属性
seek: 0, //默认跳转的时间
// promptSpot: [ //提示点
// {
// words: '提示点文字01',
// time: 30
// },
// {
// words: '提示点文字02',
// time: 150
// }
// ],
video: videoUrls
};
// 定义一个对象
var player = new ckplayer(videoObject);
this.player = player;
}
}
}
</script>