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這個方法之后立即先去執(zhí)行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', // 監(jiān)聽播放器加載成功
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狀態(tài)下會調用該函數監(jiān)聽全屏切換
console.log('已監(jiān)聽到全屏切換狀態(tài)');
};
window.timeHandler=function (time){//flashplayer狀態(tài)下為調用該函數監(jiān)聽當前播放時間
// 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 += '是否暫停狀態(tài)：' + metaData['paused'];
};
window.playHandler=function (){//flashplayer狀態(tài)下為調用該函數監(jiān)聽當前播放時間
// 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('已正確監(jiān)聽到播放器加載,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 += '是否暫停狀態(tài)：' + 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：事件方法，根據視頻播放狀態(tài)，做進一步的判斷
*/
import ckPlayer from '@/views/components/ckplayer.vue'
<ck-player :sourceUrl="sourceUrl" @playStatus= "changePlayStatus"></ck-player>
changePlayStatus(status) { //獲取子組件的播放狀態(tài)
if(status) {
this.disabledShot = false
} else {
this.disabledShot = true
this.sourceUrl = ''
this.checkedPontsName = ''
}
},
