1、在官网下载相关插件http://www.ckplayer.com/down/
image.png
2、在vue项目中引用并在index.html加载ckplyaer.js
image.png
3、封装ckplyaer.vue组件
<template>
<div class="ali-player">
<div class="main">
<div class="video-center">
<div v-if="!sourceUrls && !loadingVideo" class="tips">请选择视频源</div>
<div v-if="waiting" class="tips">获取视频中，请稍等...</div>
<div id="video" v-loading="loadingVideo" style="background-color: #0c0b0b"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: '',
components: {},
props:{
sourceUrl:{
type:String,
default:''
},
height:{
type:String,
default:'550px'
}
},
data() {
return {
sourceUrls:this.sourceUrl,//如果不赋值，在加载组件时会报错
player: null,
loadingVideo:false,
waiting:false,
reloadPlayTime:null //当视频流获取超时定时器
}
},
computed: {},
watch: {
sourceUrl: {
handler(newVal, oldVal) {
if(this.reloadPlayTime) { //重新播放或者播放新视频时，清空定时器
clearTimeout(this.reloadPlayTime);
}
if( newVal && newVal !== oldVal ) {
this.waiting = true
this.sourceUrls = newVal
this.playVideo()
}
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: false
}
},
created() {},
methods: {
playVideo() {
window.player = null
document.querySelector("#video").innerHTML = ''
let _this = this;
this.$nextTick(()=>[
this.loadingVideo = false
])
/* 选择播放视频时,同时缓存该视频的相关点位信息*/
this.videoObject = {
width: '100%', // 宽度，也可以支持百分比(不过父元素宽度要有)
height: this.height, // 高度，也可以支持百分比
container: "#video", // “#”代表容器的ID，“.”或“”代表容器的class
variable: "player", // 该属性必需设置，值等于下面的new chplayer()的对象
autoplay: true, // 自动播放
loaded:'loadedHandler', // 监听播放器加载成功
live: true,
video:this.sourceUrls
}
window.player = new ckplayer(this.videoObject); // eslint-disable-line no-undef
//超时播放，重新点击播放
this.reloadPlayTime = setTimeout( ()=> {
this.$message.warning('获取视频超时，请重新播放...')
this.sourceUrls = ''
this.loadingVideo = false
this.waiting = false
this.disabledShot = true
this.$emit('playStatus', false)
window.player.videoClear()
document.querySelector("#video").innerHTML = ''
},30*1000)
window.fullHandler = function (){//flashplayer状态下会调用该函数监听全屏切换
console.log('已监听到全屏切换状态');
};
window.timeHandler=function (time){//flashplayer状态下为调用该函数监听当前播放时间
// console.log('当前播放时间：'+time);
};
window.pauseHandler=function (){
var metaData = window.player.getMetaDate();
var html = ''
html += '总时间：' + metaData['duration'] + '秒，';
html += '音量：' + metaData['volume'] + '（范围0-1），';
html += '播放器的宽度：' + metaData['width'] + 'px，';
html += '播放器的高度：' + metaData['height'] + 'px，';
html += '视频宽度：' + metaData['videoWidth'] + 'px，';
html += '视频高度：' + metaData['videoHeight'] + 'px，';
html += '视频原始宽度：' + metaData['streamWidth'] + 'px，';
html += '视频原始高度：' + metaData['streamHeight'] + 'px，';
html += '是否暂停状态：' + metaData['paused'];
};
window.playHandler=function (){//flashplayer状态下为调用该函数监听当前播放时间
// console.log('当前播放中...：');
var metaData = window.player.getMetaDate();
if( !metaData['paused']) {
console.log('playing...')
_this.waiting = false
_this.$emit('playStatus', true) // 当点位存在播放地址时，可以截图
//当正在播放时，取消定时器
clearTimeout(_this.reloadPlayTime);
}
};
window.loadedHandler=function (){
// console.log('已正确监听到播放器加载,loadedHandler');
window.player.addListener('full',fullHandler);
window.player.addListener('time',timeHandler);
window.player.addListener('play', playHandler);
window.player.addListener('pause', pauseHandler);
var metaData = window.player.getMetaDate();
var html = ''
html += '总时间：' + metaData['duration'] + '秒，';
html += '音量：' + metaData['volume'] + '（范围0-1），';
html += '播放器的宽度：' + metaData['width'] + 'px，';
html += '播放器的高度：' + metaData['height'] + 'px，';
html += '视频宽度：' + metaData['videoWidth'] + 'px，';
html += '视频高度：' + metaData['videoHeight'] + 'px，';
html += '视频原始宽度：' + metaData['streamWidth'] + 'px，';
html += '视频原始高度：' + metaData['streamHeight'] + 'px，';
html += '是否暂停状态：' + metaData['paused'];
console.log(html)
function playHandler () {
//正在播放
console.log('正在播放')
}
function pauseHandler () {
//正在播放
console.log('暂停播放')
}
function fullHandler () {
//正在播放
console.log('全屏中')
}
function timeHandler () {
//正在播放
console.log('播放时间')
}
}
},
},
beforeDestroy () {
clearTimeout(this.reloadPlayTime);
window.player = null //销毁播放器
}
}
</script>
<style lang="scss" scoped>
.ali-player{
width: 100%;
.main {
box-sizing: border-box;
color: #FFFFFF;
.video-center {
position: relative;
.name{
position: absolute;
left: 50%;
top: -20px;
font-size: 18px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tips{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 9999;
opacity: 0.79;
}
}
}
#video {
width: 100%;
height: 500px !important;
opacity: 0.79;
}
}
</style>
4、在其他页面中引用：
/*
@sourceUrl:播放地址
@changePlayStatus：事件方法，根据视频播放状态，做进一步的判断
*/
import ckPlayer from '@/views/components/ckplayer.vue'
<ck-player :sourceUrl="sourceUrl" @playStatus= "changePlayStatus"></ck-player>
changePlayStatus(status) { //获取子组件的播放状态
if(status) {
this.disabledShot = false
} else {
this.disabledShot = true
this.sourceUrl = ''
this.checkedPontsName = ''
}
},
