//methods内
//播放视频
playVideo(item, i) {
let video = document.getElementById(item.deviceCode + i);
this.hls[i] = new Hls();
this.hls[i].loadSource(item.url);
this.hls[i].attachMedia(video);
this.hls[i].on(Hls.Events.MANIFEST_PARSED, () => {
video.play();
});
this.hls[i].on(Hls.Events.ERROR, (event, data) => {
// 监听出错事件
console.log("加载失败", event, data);
});
},
// startDownload(item) {
// this.showDownloadDialog = true;
// this.currentDownload = item;
// },
//下载视频
// downloadVideo() {
// let time1 = moment(this.downloadTime1).format("X");
// let time2 = moment(this.downloadTime2).format("X");
// let len = time2 - time1;
// if(len > 3600) {
// this.$message.error("请选择1小时内的时间区间");
// return;
// }
// let downloadUrl = `http://10.13.126.92:8282/template/video/download?deviceCode=${this.currentDownload.deviceCode}&channelNum=${this.currentDownload.channelNum}&startTime=${this.downloadTime1}&endTime=${this.downloadTime2}&channelName=${this.currentDownload.channelName}`
// window.location.href = downloadUrl;
// this.showDownloadDialog = false;
// this.downloadTime1 = "";
// this.downloadTime2 = "";
// },
//查询
query() {
this.videoUrlArr = [];
let nodes = this.$refs.videoTree.getCheckedNodes();
let childNodes = nodes.filter(item => !item.parent);
if (childNodes.length > 4) {
this.$message.error("勾选的节点不能超出4个,请重新选择！");
return;
}
this.playCount = childNodes.length > 1 ? 4 : 1;//展示 4屏:单屏
this.currentNum = childNodes.length > 1 ? 1 : 0;//点击单屏:4屏
// let startTime = moment(this.startTime).format('X');
// let endTime = moment(this.endTime).format('X');
// let timeLength = Number(endTime) - Number(startTime);
for (let i = 0; i < childNodes.length; i++) {
// 本地测试 todo
const url = "http://localhost:7086/live/cameraid/" + childNodes[i].deviceCode + "%24" + childNodes[i].channelSeq + "/substream/1.m3u8?" + "token=1:1ddd7298-94e1-4130-ab6f-bb9182088982";
// let host = window.location.host.split(":")[0];
// 录像回放
// let url = 'http://localhost:7086/vod/device/cameraid/'+ childNodes[i].deviceCode + '%24'+ childNodes[i].channelSeq + '/substream/1/recordtype/1/totallength/' + timeLength + '/begintime/'+startTime+'/endtime/'+endTime+'.m3u8';
// 实时播放
// const url = "http://localhost:7086/live/cameraid/" + childNodes[i].deviceCode + "%24" + childNodes[i].channelSeq + "/substream/1.m3u8";
this.videoUrlArr.push(
{
url: url,
deviceCode: childNodes[i].deviceCode,
channelNum: childNodes[i].channelSeq,
channelName: childNodes[i].channelName
}
);
this.changeVideoUrlArr = this.videoUrlArr;
}
this.$nextTick(() => {
this.videoUrlArr.forEach((item, index) => {
this.playVideo(item, index);
})
})
},
//关闭视频播放
closeVideoPlay(i) {
this.videoUrlArr[i].url = "";
this.$refs.videoTree.setChecked(this.videoUrlArr[i].channelName, false);
let nodes = this.$refs.videoTree.getCheckedNodes();
let childNodes = nodes.filter(item => !item.parent);
this.selectChildNodes = childNodes&& childNodes.length;
this.hls[i].destroy();
},
//改变分屏
changeNum(item, index) {
this.currentNum = index;
this.playCount = item.value;
if (this.playCount == 1 && this.videoUrlArr.length > 1) {
this.videoUrlArr = [this.videoUrlArr[0]];
}else{
this.videoUrlArr = this.changeVideoUrlArr;
}
}
<style lang="less" scoped>
.video-play-container {
width: 100%;
height: 100vh;
font-size: 14px;
color: #666;
background: #eceef1;
padding: 20px;
display: flex;
text-align: left;
box-sizing: boder-box;
position: relative;
.download-dialog {
position: absolute;
width: 300px;
padding: 20px;
// height: 300px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 99;
background: #f0f0f0;
border-radius: 5px;
.download-close {
position: absolute;
right: 10px;
top: 10px;
}
}
p {
margin: 0;
}
.video-tree-box {
width: 260px;
height: 100%;
background: #fff;
p {
height: 45px;
line-height: 45px;
padding-left: 20px;
border-bottom: 1px solid #ddd;
color: #445160;
font-weight: 700;
}
/deep/ .el-input__inner {
height: 36px;
line-height: 36px;
}
/deep/ .el-input__icon {
line-height: 36px;
}
.tree-select-content {
padding: 15px;
height: calc(100% - 250px);
border-bottom: 1px solid #ddd;
.tree-select {
margin-top: 10px;
width: 100%;
height: calc(100% - 50px);
overflow: auto;
::v-deep .el-tree-node > .el-tree-node__children {
overflow: visible;
}
}
.online-icon {
color: #0fe1f4;
margin-right: 3px;
}
.offline-icon {
color: #ff4f4f;
margin-right: 3px;
}
/deep/ .el-tree-node {
.is-leaf+.el-checkbox .el-checkbox__inner {
display: inline-block;
}
.el-checkbox .el-checkbox__inner {
display: none;
}
}
/deep/ .el-tree-node__content>label.el-checkbox {
margin-right: 3px;
}
}
.tree-query {
padding: 20px;
}
.custom-query {
padding: 10px 20px;
margin-top: 15px;
}
}
.video-play-box {
flex: 1;
height: 100%;
border-left: 1px solid #ddd;
video::-internal-media-controls-overflow-button {
display: none !important;
}
video::-webkit-media-controls-overflow-button {
display: none !important;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
.change-video-number {
height: 45px;
line-height: 45px;
padding-left: 20px;
background: #fff;
.single {
display: inline-block;
padding: 0 20px;
height: 32px;
line-height: 32px;
border: 1px solid #e9ebee;
cursor: pointer;
&:first-child {
border-right: 0;
border-radius: 5px 0 0 5px;
}
&:last-child {
border-left: 0;
border-radius: 0 5px 5px 0;
}
}
.active {
color: #1c79f4;
border-color: #1c79f4;
&:first-child {
border-right: 1px solid #1c79f4;
}
&:last-child {
border-left: 1px solid #1c79f4;
}
}
}
.video-container {
height: calc(100% - 45px);
background: #1c2834;
display: flex;
flex-wrap: wrap;
.play-icon {
width: 130px;
height: 84px;
}
.no-play-box {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
&:hover .custom-cover {
display: block;
}
}
.custom-close {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
cursor: pointer;
font-size: 20px;
}
.custom-download {
color: #fff;
cursor: pointer;
font-size: 24px;
// font-weight: bold;
}
.custom-cover {
position: absolute;
background: transparent;
bottom: 32px;
right: 162px;
display: inline-block;
width: 30px;
height: 30px;
display: none;
}
.more {
width: 50%;
height: 50%;
border: 1px solid rgba(0, 0, 0, .3);
}
}
}
}
</style>
