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