106 lines
2.4 KiB
Vue
106 lines
2.4 KiB
Vue
<template>
|
||
<div class="ckVideoContainer">
|
||
<div class="top" v-if="showSelectBtn">
|
||
<span
|
||
class="winNumName"
|
||
>{{$t('message.videoManage.video')}}{{$t('message.videoManage.window')}}{{index}}</span>
|
||
<!-- <img src="@/assets/images/overview3/close.png" class="close" @click="clocseVideo(item)" /> -->
|
||
</div>
|
||
<span v-if="showSelectBtn" class="operateIcon operateBtn primary" @click="selectWin"
|
||
>选中此窗口</span
|
||
>
|
||
<div class="ckVideoBox" :class="'ckVideoBox' + index"></div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
props: ["url", "index","showSelectBtn"],
|
||
watch: {
|
||
//监听value的变化，进行相应的操作即可
|
||
url: function (a, b) {
|
||
//a是value的新值，b是旧值
|
||
this.init();
|
||
},
|
||
},
|
||
data() {
|
||
return {};
|
||
},
|
||
mounted() {
|
||
this.init()
|
||
},
|
||
methods: {
|
||
selectWin() {
|
||
this.$emit("selectWin", this.$props.index);
|
||
},
|
||
init() {
|
||
console.log("加载ckplayer");
|
||
var videoObject = {
|
||
container: ".ckVideoBox" + this.$props.index, //容器的ID或className
|
||
variable: "player", //播放函数名称
|
||
autoplay: true,
|
||
live: true,
|
||
video: this.$props.url,
|
||
// video: "rtmp://localhost:1935/mylive/1",
|
||
};
|
||
var player = new ckplayer(videoObject);
|
||
// console.log("ckplay");
|
||
// console.log(player);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.ckVideoContainer,
|
||
.ckVideoBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
.ckVideoContainer:hover .operateIcon {
|
||
display: block;
|
||
}
|
||
.operateIcon {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 10px;
|
||
display: none;
|
||
z-index: 100000;
|
||
cursor: pointer;
|
||
}
|
||
.operateBtn {
|
||
font-size: 12px;
|
||
border-radius: 10px;
|
||
color: #fff;
|
||
width: auto;
|
||
vertical-align: top;
|
||
line-height: 19px;
|
||
padding: 0 5px;
|
||
&.default {
|
||
background-color: #9a9b9c;
|
||
}
|
||
&.primary {
|
||
background-color: #31a4d9;
|
||
}
|
||
}
|
||
.top{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 1005;
|
||
// background-color: #030303;
|
||
.winNumName{
|
||
color: #ffffff;
|
||
font-size: 12px;
|
||
text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
|
||
padding: 10px 18px;
|
||
display: inline-block;
|
||
}
|
||
.close{
|
||
padding: 8px 18px;
|
||
float: right;
|
||
cursor: pointer;
|
||
display: none;
|
||
}
|
||
}
|
||
</style> |