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 //销毁播放器

}

}

.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;

}

}