925 lines
30 KiB
Vue
925 lines
30 KiB
Vue
<template>
|
||
<!-- 下拉框选择视频，需传入视频列表 -->
|
||
<div
|
||
class="fullHeight videoOverview"
|
||
id="videoOverview"
|
||
:class="{ videoOverview1: pageBtn }"
|
||
>
|
||
<!-- <div v-show="showPlaybacks" class="videoTop">
|
||
<span
|
||
class="videoType"
|
||
:class="{ active: videoType == 1 }"
|
||
@click="videoType = 1"
|
||
>{{ $t("message.videoManage.live") }}</span
|
||
>
|
||
<span
|
||
v-show="showPlaybacks"
|
||
class="videoType"
|
||
:class="{ active: videoType == 2 }"
|
||
@click="
|
||
videoType = 2;
|
||
winNum = 1;
|
||
activeWinIndex = 1;
|
||
"
|
||
>{{ $t("message.videoManage.playback") }}</span
|
||
>
|
||
</div> -->
|
||
<leCheng v-if="pluginType == 'lecheng'" :url="urls" :token="lcToken"></leCheng>
|
||
<!-- <YsyNew
|
||
:ref="'ysy'"
|
||
v-if="pluginType == 'ysy'"
|
||
:ysyParams="ysyParams"
|
||
></YsyNew> -->
|
||
<YsyPlayer v-if="pluginType == 'ysy'"></YsyPlayer>
|
||
<template v-else-if="pluginType == 'isc' && videoType == 1">
|
||
<iscPlugin
|
||
:type="type"
|
||
:isIframe="isIframe"
|
||
:devList="devList"
|
||
:devListAll="devListAll"
|
||
v-if="isWindows() && $store.state.forceH5Play == 0"
|
||
:class="{
|
||
isDockingToWoer: isDockingToWoer,
|
||
isLongguangIframe: isIframe,
|
||
isFullScreen: isFullScreen,
|
||
}"
|
||
:style="{ left: worMenuWidth + 'px' }"
|
||
></iscPlugin>
|
||
<iscPluginH5
|
||
v-else
|
||
:type="type"
|
||
:isIframe="isIframe"
|
||
:devList="devList"
|
||
:devListAll="devListAll"
|
||
:shrinkCloseFlag="shrinkCloseFlag"
|
||
:class="{
|
||
isDockingToWoer: isDockingToWoer,
|
||
isLongguangIframe: isIframe,
|
||
isFullScreen: isFullScreen,
|
||
}"
|
||
:style="{ left: worMenuWidth + 'px' }"
|
||
@selectPlayVideo="selectPlayVideo"
|
||
></iscPluginH5>
|
||
</template>
|
||
|
||
<DHPlayer v-else-if="pluginType == 'dahua'" :devList="devList"></DHPlayer>
|
||
<!-- 回放插件 -->
|
||
<Back v-else-if="pluginType == 'isc' && videoType == 2" :devList="devList"> </Back>
|
||
<div v-else-if="pluginType == 'xiongmai'">
|
||
<div id="wrapper" style="width: 1570px; height: 830px"></div>
|
||
</div>
|
||
<div
|
||
v-else
|
||
:class="
|
||
!bottomMod
|
||
? 'oneVideoContent videoContent' + winNum
|
||
: 'videoContent videoContent' + winNum
|
||
"
|
||
>
|
||
<div
|
||
class="videoItem"
|
||
v-for="item in initDivNum"
|
||
:key="item"
|
||
:class="{ active: activeWinIndex == item }"
|
||
@click="activeWinIndex = item"
|
||
v-show="item <= winNum"
|
||
>
|
||
<!-- <ysyPlayAndPlayback
|
||
:ref="'ysy' + item"
|
||
v-if="pluginType == 'ysy'"
|
||
:ysyParams="ysyParams"
|
||
></ysyPlayAndPlayback> -->
|
||
|
||
<ckPlayer
|
||
@selectWin="selectWin"
|
||
:showSelectBtn="true"
|
||
v-if="pluginType == 'ckPlayer'"
|
||
:url="urls[item]"
|
||
:index="item"
|
||
></ckPlayer>
|
||
<div class="videoInner2" v-if="pluginType == 'videojs'">
|
||
<div class="top">
|
||
<span class="winNumName"
|
||
>{{ $t("message.videoManage.video") }}{{ $t("message.videoManage.window")
|
||
}}{{ item }}</span
|
||
>
|
||
<img
|
||
src="@/assets/images/overview3/close.png"
|
||
class="close"
|
||
@click="clocseVideo(item)"
|
||
/>
|
||
</div>
|
||
<div class="noVideoBox noVideoBox1">
|
||
<img src="@/assets/images/overview3/noVideo.png" class="close" />
|
||
<p>{{ $t("message.videoManage.no") }}{{ $t("message.videoManage.video") }}</p>
|
||
</div>
|
||
<div class="noVideoBox noVideoBox2" style="display: none">
|
||
<img
|
||
src="@/assets/images/longguang/loading.png"
|
||
class="close"
|
||
v-if="company == 'longguang'"
|
||
/>
|
||
<img src="@/assets/images/overview3/loading.png" class="close" v-else />
|
||
<p>
|
||
{{ $t("message.videoManage.video")
|
||
}}{{ $t("message.videoManage.loading") }}...
|
||
</p>
|
||
</div>
|
||
<div class="videoInner">
|
||
<video
|
||
width="100%"
|
||
height="100%"
|
||
:id="'myPlayer' + item"
|
||
autoplay="autoplay"
|
||
class="videoClass"
|
||
controls="controls"
|
||
>
|
||
<source type="application/x-mpegURL" src />
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
@mousemove="DisplayCoord"
|
||
@click="getPlaybackTime"
|
||
class="timeLineBox"
|
||
id="timeLineBox"
|
||
>
|
||
<div class="timeItem" v-for="item in 24" :key="item">
|
||
<span class="time" v-show="item != 24">{{ item }}:00</span>
|
||
</div>
|
||
<div class="mouseLine" id="mouseLine"></div>
|
||
</div>
|
||
<div class="videoControl" v-if="bottomMod">
|
||
<div>
|
||
<!-- <el-autocomplete v-if="!hiddenSelectBox"
|
||
class="selectDev"
|
||
size="medium"
|
||
popper-class="my-autocomplete"
|
||
v-model="selectDev"
|
||
:fetch-suggestions="querySearch"
|
||
placeholder="请选择视频"
|
||
@select="handleSelect"
|
||
@focus="selectDev=''"
|
||
>
|
||
<i class="el-icon-caret-bottom el-input__icon" slot="suffix"></i>
|
||
<template slot-scope="{ item }">
|
||
<div class="devDetail" :class="{'active':item.winNum!=0}">
|
||
<div class="name">{{ item.value }}</div>
|
||
<span
|
||
class="addr"
|
||
v-show="item.winNum!=0"
|
||
>{{$t('message.videoManage.video')}}{{$t('message.videoManage.window')}}{{ item.winNum }}{{$t('message.videoManage.playing')}}......</span>
|
||
</div>
|
||
</template>
|
||
</el-autocomplete> -->
|
||
<span
|
||
v-show="showPlaybacks"
|
||
class="videoType"
|
||
:class="{ active: videoType == 1 }"
|
||
@click="videoType = 1"
|
||
>{{ $t("message.videoManage.live") }}</span
|
||
>
|
||
<span
|
||
v-show="showPlaybacks"
|
||
class="videoType"
|
||
:class="{ active: videoType == 2 }"
|
||
@click="
|
||
videoType = 2;
|
||
winNum = 1;
|
||
activeWinIndex = 1;
|
||
"
|
||
>{{ $t("message.videoManage.playback") }}</span
|
||
>
|
||
</div>
|
||
<div class="historyDate" v-show="videoType == 2">
|
||
<img
|
||
src="@/assets/images/overview3/forward.png"
|
||
class="forward forward-l"
|
||
srcset
|
||
/>
|
||
<i class="el-icon-caret-left"></i>
|
||
<el-date-picker
|
||
size="medium"
|
||
class="selectDev"
|
||
v-model="time"
|
||
type="datetime"
|
||
placeholder="选择日期时间"
|
||
value-format="yyyy-MM-dd hh:mm:ss"
|
||
></el-date-picker>
|
||
<i class="el-icon-caret-right"></i>
|
||
<img src="@/assets/images/overview3/forward.png" class="forward" srcset />
|
||
</div>
|
||
<div class="operateBar">
|
||
<i
|
||
v-show="videoType == 1 && showMoreWin"
|
||
class="one"
|
||
:class="{ active: winNum == 1 }"
|
||
@click="changeWinNum(1)"
|
||
></i>
|
||
<i
|
||
v-show="videoType == 1 && showMoreWin && videoWinNum > 1"
|
||
class="four"
|
||
:class="{ active: winNum == 4 }"
|
||
@click="changeWinNum(4)"
|
||
></i>
|
||
<i
|
||
v-show="videoType == 1 && showMoreWin && videoWinNum > 4"
|
||
class="nine"
|
||
:class="{ active: winNum == 9 }"
|
||
@click="changeWinNum(9)"
|
||
></i>
|
||
<i v-show="showCaptrue && videoWinNum > 4" class="img"></i>
|
||
<i
|
||
v-show="videoType == 1 && showControl && videoWinNum > 4"
|
||
class="control"
|
||
:class="{ active: showControlBox }"
|
||
@click="showControlBox = !showControlBox"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
<div class="controlBox" v-show="showControlBox">
|
||
<div class="top">
|
||
<img src="@/assets/images/overview3/controlBG.png" alt srcset />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow1" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow2" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow3" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow4" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow5" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow6" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow7" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow8" />
|
||
</div>
|
||
<div class="bar">
|
||
<span>{{ $t("message.videoManage.changeTimes") }}</span>
|
||
<el-slider class="slider" v-model="bar1"></el-slider>
|
||
</div>
|
||
<div class="bar">
|
||
<span>{{ $t("message.videoManage.focus") }}</span>
|
||
<el-slider class="slider" v-model="bar2"></el-slider>
|
||
</div>
|
||
<div class="bar">
|
||
<span>{{ $t("message.videoManage.aperture") }}</span>
|
||
<el-slider class="slider" v-model="bar3"></el-slider>
|
||
</div>
|
||
</div>
|
||
<div class="ysy-player-toolbar" v-if="pluginType == 'ysy'">
|
||
<div class="btn-box-container">
|
||
<div
|
||
v-for="layout in layoutOptions"
|
||
:key="layout.value"
|
||
class="btn-box"
|
||
:class="{ active: select === layout.value }"
|
||
:title="layout.label"
|
||
>
|
||
<img
|
||
@click="handleChangeSelect(layout.value)"
|
||
class="rect"
|
||
:src="select === layout.value ? layout.activeIcon : layout.icon"
|
||
:alt="layout.label"
|
||
/>
|
||
</div>
|
||
<!-- <div class="btn-box" title="播放全部" @click="handlePlayAll">
|
||
<img class="rect" src="@/assets/images/monitor/play-all.png" alt="播放全部" />
|
||
</div> -->
|
||
<div class="btn-box" title="关闭全部" @click="handleCloseAll">
|
||
<img class="rect" src="@/assets/images/monitor/close-all.png" alt="关闭全部" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import emitter from "./mitt";
|
||
import YsyPlayer from "./ysy-player.vue";
|
||
import YsyNew from "@/views/projectFront/videoManage/ysyNew.vue";
|
||
import ysyPlayAndPlayback from "./ysyPlayAndPlayback";
|
||
import iscPlugin from "./isc_plugin/isc_plugin";
|
||
import iscPluginH5 from "./isc_plugin/isc_plugin_h5";
|
||
import ckPlayer from "./ckPlayer";
|
||
import leCheng from "./leCheng";
|
||
import DHPlayer from "./DHPlayer/dhPlayer";
|
||
import Back from "./playBack/playBack";
|
||
import Live from "@/plugins/screens";
|
||
import {
|
||
resizeFn,
|
||
setOffset,
|
||
hidePluginWindow,
|
||
showPluginWindow,
|
||
} from "./isc_plugin/video_isc_plugin.js";
|
||
import { getVideoItemInfoApi } from "@/assets/js/api/equipmentCenter/cameraList";
|
||
import { projectVideoConfigListApi } from "@/assets/js/api/equipmentCenter/cameraList";
|
||
import { isWindows } from "@/util/util";
|
||
export default {
|
||
props: [
|
||
"value",
|
||
"displayBottomMod",
|
||
"winNumBer",
|
||
"autoplay",
|
||
"hiddenSelectBox",
|
||
"type",
|
||
"scrrenPosition",
|
||
"xxx",
|
||
"showPlayback",
|
||
"shrinkCloseFlag",
|
||
"devListAll",
|
||
],
|
||
components: {
|
||
ysyPlayAndPlayback,
|
||
ckPlayer,
|
||
leCheng,
|
||
DHPlayer,
|
||
iscPlugin,
|
||
iscPluginH5,
|
||
Back,
|
||
YsyNew,
|
||
YsyPlayer,
|
||
},
|
||
watch: {
|
||
//监听value的变化，进行相应的操作即可
|
||
value: function (a, b) {
|
||
console.log("新的值", a);
|
||
this.devList = a;
|
||
|
||
if (this.isDockingToWoer) {
|
||
this.pluginType = "isc";
|
||
} else {
|
||
// this.getProjectVideoConfigList();
|
||
this.getPlayType();
|
||
}
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
currentVideoTypeDetail: "",
|
||
screens: null,
|
||
bottomMod: false, //是否显示 底部 选择框 和 窗口选择器 false 不显示； true 显示
|
||
videoWinNum: 1, // 窗口选择器 数量 1 1个窗口 4 4个窗口 9 九个窗口
|
||
showAutoplay: false, //自动播放
|
||
infor: {
|
||
enableNotPlugin: 1,
|
||
},
|
||
devList: [],
|
||
videoType: 1,
|
||
selectDev: "",
|
||
winNum: 1,
|
||
activeWinIndex: 1,
|
||
showControlBox: false,
|
||
bar1: 20,
|
||
bar2: 20,
|
||
bar3: 20,
|
||
startTime: "",
|
||
endTime: "",
|
||
locationValue: "",
|
||
videoObject1: "",
|
||
videoObject2: "",
|
||
videoObject3: "",
|
||
videoObject4: "",
|
||
videoObject5: "",
|
||
videoObject6: "",
|
||
videoObject7: "",
|
||
videoObject8: "",
|
||
videoObject9: "",
|
||
showMoreWin: true, //是否显示多窗口切换
|
||
showCaptrue: false, //是否显示截图按钮
|
||
showControl: false, //是否显示控球按钮
|
||
showPlaybacks: false, //是否显示视频回放按钮
|
||
pluginType: "", //ysy:萤石云 videojs ckPlayer lecheng isc xiongmai
|
||
initDivNum: 9,
|
||
ysyParams: [],
|
||
urls: ["", "", "", "", "", "", "", "", ""],
|
||
lcToken: "",
|
||
isDockingToWoer: false,
|
||
worMenuWidth: 0, //用于和沃尔对接时定位插件
|
||
company: "",
|
||
isIframe: false,
|
||
isFullScreen: false,
|
||
select: 1,
|
||
layoutOptions: [],
|
||
pageBtn: false,
|
||
};
|
||
},
|
||
destroy() {
|
||
hidePluginWindow();
|
||
},
|
||
created() {
|
||
if (this.$route.path.indexOf("/companyAdmin/videoSurveillance") != -1) {
|
||
this.pageBtn = true;
|
||
}
|
||
this.layoutOptions = [
|
||
{
|
||
value: 1,
|
||
label: "单屏",
|
||
icon: require("@/assets/images/monitor/video_1.png"),
|
||
activeIcon: require("@/assets/images/monitor/video_1_active.png"),
|
||
},
|
||
{
|
||
value: 2,
|
||
label: "四分屏",
|
||
icon: require("@/assets/images/monitor/video_2.png"),
|
||
activeIcon: require("@/assets/images/monitor/video_2_active.png"),
|
||
},
|
||
{
|
||
value: 3,
|
||
label: "九分屏",
|
||
icon: require("@/assets/images/monitor/video_3.png"),
|
||
activeIcon: require("@/assets/images/monitor/video_3_active.png"),
|
||
},
|
||
];
|
||
|
||
console.log("用的是这个组件吗", this.$props);
|
||
this.company = COMPANY;
|
||
this.devList = this.$props.value;
|
||
|
||
// this.bottomMod = this.$props.displayBottomMod;
|
||
this.videoWinNum = this.$props.winNumBer;
|
||
this.showAutoplay = this.$props.autoplay;
|
||
|
||
this.showCaptrue = this.$props.showCaptrue;
|
||
this.showControl = this.$props.showControl;
|
||
this.showPlaybacks = this.$props.showPlayback;
|
||
console.log("当前显示回放不", this.showPlaybacks);
|
||
// if(this.$props.hiddenSelectBox){
|
||
// this.hiddenSelectBox = this.$props.hiddenSelectBox;
|
||
// }
|
||
this.isDockingToWoer = isDockingToWoer;
|
||
// lgzbdp
|
||
if (window.localStorage.getItem("isIframe")) {
|
||
if (window.localStorage.getItem("isIframe") == "1") {
|
||
this.isIframe = true;
|
||
// this.$nextTick(()=>{
|
||
// setOffset(2180,360)
|
||
// })
|
||
}
|
||
console.log(window.localStorage.getItem("isIframe"));
|
||
}
|
||
if (this.isIframe && this.scrrenPosition) {
|
||
this.worMenuWidth = this.scrrenPosition;
|
||
// this.worMenuWidth = 2160
|
||
}
|
||
if (this.isDockingToWoer) {
|
||
this.worMenuWidth = parseInt(document.body.clientWidth) * 0.025 + 10;
|
||
// this.pluginType='isc'
|
||
} else {
|
||
this.getPlayType();
|
||
}
|
||
this.loadMapScript();
|
||
},
|
||
|
||
mounted() {
|
||
this.getProjectVideoConfigList();
|
||
// 广西联通 处理回放按钮
|
||
if (this.pluginType == "ysy" || this.pluginType == "isc") {
|
||
console.log("是这里不");
|
||
this.showMoreWin = false;
|
||
this.showCaptrue = false;
|
||
this.showControl = false;
|
||
this.showPlaybacks = true; //回放
|
||
this.bottomMod = false;
|
||
this.initDivNum = 1;
|
||
} else if (this.pluginType == "videojs") {
|
||
this.$nextTick(() => {
|
||
this.initVideo();
|
||
});
|
||
} else if (this.pluginType == "xiongmai") {
|
||
this.bottomMod = false;
|
||
} else if (this.pluginType == "lecheng") {
|
||
this.bottomMod = false;
|
||
}
|
||
// window.addEventListener('keydown',this.fullScreen)
|
||
// console.log(document.getElementById('videoOverview'))
|
||
},
|
||
destroyed() {
|
||
if (this.pluginType == "videojs") {
|
||
for (let index = 1; index <= 9; index++) {
|
||
this["videoObject" + index].dispose();
|
||
}
|
||
}
|
||
window.removeEventListener("keydown", this.fullScreen);
|
||
},
|
||
methods: {
|
||
isWindows,
|
||
selectPlayVideo(find) {
|
||
this.$emit("selectPlayVideo", find);
|
||
},
|
||
// 动态加载脚本
|
||
loadMapScript() {
|
||
return new Promise((resolve, reject) => {
|
||
const script = document.createElement("script");
|
||
script.src = `./DHPlayer/videoPlayer.js`;
|
||
script.onload = () => resolve();
|
||
script.onerror = reject;
|
||
document.head.appendChild(script);
|
||
});
|
||
},
|
||
handleChangeSelect(value) {
|
||
if (this.select === value) return;
|
||
this.select = value;
|
||
emitter.emit("changeLayout", value);
|
||
},
|
||
handleCloseAll() {
|
||
emitter.emit("closeAll");
|
||
},
|
||
//查询项目各类型的视频配置信息
|
||
getProjectVideoConfigList() {
|
||
console.log(5555555, this.devList);
|
||
projectVideoConfigListApi({
|
||
projectSn:
|
||
this.$store.state.projectSn || this.devList[0].sn || this.devList[0].projectSn,
|
||
}).then((res) => {
|
||
this.infor = res.result;
|
||
// if(this.infor.enableNotPlugin == 1 && this.devList.length > 1) {
|
||
// this.$message.warning('该项目已开启非插件模式，不能直接全部播放视频！')
|
||
// return
|
||
// }
|
||
// Live.login(
|
||
// this.infor.appId,
|
||
// this.infor.appSecret,
|
||
// this.infor.account,
|
||
// this.infor.port
|
||
// ).then((res) => {
|
||
// // 配置参数加载视频
|
||
// this.screens.setOptions(
|
||
// /* 这里传入配置对象 */ {
|
||
// deviceId: "1202291000447",
|
||
// channelNum: 1,
|
||
// streamType: 0,
|
||
// mediaType: "FLV",
|
||
// recordTimeStart: "2022-07-16 04:00:00",
|
||
// recordTimeEnd: "2022-07-16 06:00:00",
|
||
// source: "device",
|
||
// isDownload: 0,
|
||
// tokenType: "Dynamic",
|
||
// expireTime: "0",
|
||
// https: false,
|
||
// }
|
||
// );
|
||
// });
|
||
});
|
||
},
|
||
fullScreen(e) {
|
||
var e = event || window.event || arguments.callee.caller.arguments[0];
|
||
if (e && e.keyCode == 122) {
|
||
//捕捉F11键盘动作
|
||
console.log(e.keyCode);
|
||
this.isFullScreen = !this.isFullScreen;
|
||
if (this.isFullScreen) {
|
||
resizeFn(1);
|
||
} else {
|
||
// hidePluginWindow()
|
||
// showPluginWindow()
|
||
}
|
||
// setOffset(2180,360)
|
||
}
|
||
},
|
||
//改变窗口分割数量
|
||
changeWinNum(num) {
|
||
this.winNum = num;
|
||
this.activeWinIndex = 1;
|
||
console.log("this.activeWinIndex", this.activeWinIndex);
|
||
if (this.pluginType == "ysy") {
|
||
this.$refs.ysy1.init2("");
|
||
// this.$refs['ysy'+this.activeWinIndex].init()
|
||
}
|
||
},
|
||
//判断视频播放方式
|
||
getPlayType() {
|
||
console.log(this.devList, 123);
|
||
if (this.devList.length == 0) {
|
||
return;
|
||
}
|
||
//videoType 1萤石云，2乐橙，3ISC，4大华，5宇视，6国标，7国密
|
||
switch (Number(this.devList[0].videoType)) {
|
||
case 1:
|
||
this.bottomMod = false;
|
||
this.pluginType = "ysy";
|
||
this.$nextTick(() => {
|
||
emitter.emit("selectMonitor", this.devList[0]);
|
||
});
|
||
// if (this.devList.length > 1) {
|
||
// this.ysyParams = this.devList
|
||
// } else if (this.devList.length == 1) {
|
||
// let arr = []
|
||
// arr.push(this.devList[0])
|
||
// this.ysyParams = arr
|
||
// }
|
||
// //playType 播放方式，1高清RTMP,2流畅RTMP,3高清HLS,4流畅HLS,5高清轻量级插件，6流畅轻量级插件
|
||
// var videoType = this.devList[0].videoType
|
||
// var playType = this.devList[0].playType
|
||
// switch (Number(videoType)) {
|
||
// case 1:
|
||
// if (playType == 1 || playType == 2) {
|
||
// this.bottomMod = true
|
||
// this.pluginType = 'ckPlayer'
|
||
// // console.log(this.devList[0].url)
|
||
// this.urls[this.activeWinIndex] = this.devList[0].url
|
||
// // console.log(this.urls)
|
||
// // this.bottomMod=true
|
||
// }
|
||
// if (playType == 3 || playType == 4) {
|
||
// console.log('this.bottomMod', this.bottomMod)
|
||
// this.bottomMod = true
|
||
// this.pluginType = 'videojs'
|
||
// this.$nextTick(() => {
|
||
// this.initVideo()
|
||
// this.playVideoWithVideojs(this.devList[0].url)
|
||
// })
|
||
// }
|
||
// if (playType == 5 || playType == 6) {
|
||
// this.bottomMod = false
|
||
|
||
// this.pluginType = 'ysy'
|
||
// }
|
||
// break
|
||
// case 2:
|
||
// this.pluginType = 'videojs'
|
||
// break
|
||
// case 3:
|
||
// this.pluginType = 'videojs'
|
||
// break
|
||
// case 4:
|
||
// this.pluginType = 'videojs'
|
||
// break
|
||
// case 5:
|
||
// this.pluginType = 'videojs'
|
||
// break
|
||
// case 6:
|
||
// this.pluginType = 'videojs'
|
||
// break
|
||
// }
|
||
break;
|
||
case 2:
|
||
// this.urls.push({
|
||
// url:this.devList[0].url,
|
||
// kitToken:this.devList[0].accessToken
|
||
// })
|
||
this.bottomMod = false;
|
||
// if(this.$props.type=='company'){
|
||
// this.bottomMod=false
|
||
// }else{
|
||
// this.bottomMod=true
|
||
// }
|
||
this.$nextTick(() => {
|
||
this.initVideo();
|
||
this.devList[0].winNum = 1;
|
||
this.playVideoWithVideojs(this.devList[0].url);
|
||
});
|
||
this.pluginType = "videojs";
|
||
break;
|
||
case 3:
|
||
this.bottomMod = false;
|
||
// if(this.$props.type=='company'){
|
||
// this.bottomMod=false
|
||
// }else{
|
||
// this.bottomMod=true
|
||
// }
|
||
this.pluginType = "isc";
|
||
break;
|
||
case 7:
|
||
this.bottomMod = false;
|
||
this.pluginType = "xiongmai";
|
||
break;
|
||
case 4:
|
||
this.pluginType = "dahua";
|
||
}
|
||
console.log("当前点击的类型", this.pluginType);
|
||
setTimeout(() => {
|
||
if (document.getElementById("wrapper") != null && this.screens == null) {
|
||
this.screens = Live.init(document.getElementById("wrapper"));
|
||
}
|
||
let configInfo = localStorage.getItem("configInfo");
|
||
if (configInfo) {
|
||
configInfo = configInfo && JSON.parse(configInfo);
|
||
}
|
||
this.getProjectVideoConfigList();
|
||
}, 100);
|
||
},
|
||
selectWin(data) {
|
||
this.activeWinIndex = data;
|
||
},
|
||
//初始化视频插件
|
||
initVideo() {
|
||
console.log(this.devList);
|
||
//
|
||
for (let index = 1; index <= 9; index++) {
|
||
if (this["videoObject" + index] == "") {
|
||
this["videoObject" + index] = videojs(
|
||
"myPlayer" + index,
|
||
{
|
||
textTrackDisplay: false,
|
||
controlBar: false,
|
||
autoplay: this.showAutoplay,
|
||
muted: this.showAutoplay ? true : false,
|
||
},
|
||
function onPlayerReady() {
|
||
this.on("error", function () {
|
||
// 报错信息
|
||
var mediaError = this.error();
|
||
console.log("mediaError", mediaError);
|
||
});
|
||
}
|
||
);
|
||
|
||
if (!this.bottomMod) {
|
||
this["videoObject" + 1].src([
|
||
{
|
||
type: "application/x-mpegURL",
|
||
src: this.devList[0].url,
|
||
},
|
||
]);
|
||
this["videoObject" + 1].play();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
querySearch(queryString, cb) {
|
||
var restaurants = this.devList;
|
||
var results = queryString
|
||
? restaurants.filter(this.createFilter(queryString))
|
||
: restaurants;
|
||
// 调用 callback 返回建议列表的数据
|
||
cb(results);
|
||
},
|
||
createFilter(queryString) {
|
||
return (restaurant) => {
|
||
return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
|
||
};
|
||
},
|
||
clocseVideo(item) {
|
||
// console.log(item);
|
||
var obj = this["videoObject" + item];
|
||
// console.log(obj);
|
||
if (obj) {
|
||
this["videoObject" + item].dispose();
|
||
this.devList.forEach((element) => {
|
||
if (element.winNum == item) {
|
||
element.winNum = 0;
|
||
}
|
||
});
|
||
// console.log(this.devList);
|
||
}
|
||
document.getElementsByClassName("noVideoBox2")[item - 1].style.display = "none";
|
||
document.getElementsByClassName("noVideoBox1")[item - 1].style.display = "block";
|
||
this.$emit("closeVideoDialog", false);
|
||
},
|
||
handleSelect(item) {
|
||
console.log(item);
|
||
|
||
this.urls[this.activeWinIndex] = item.url;
|
||
this.devList.forEach((element) => {
|
||
if (element.value == item.value) {
|
||
element.winNum = this.activeWinIndex;
|
||
}
|
||
if (element.value != item.value && element.winNum == this.activeWinIndex) {
|
||
element.winNum = 0;
|
||
}
|
||
});
|
||
console.log(this.devList);
|
||
this.selectDev = "";
|
||
if (this.pluginType == "ysy") {
|
||
this.getVideo(item);
|
||
}
|
||
if (this.pluginType != "videojs") {
|
||
return;
|
||
}
|
||
// var obj = this["videoObject" + this.activeWinIndex];
|
||
// console.log(obj)
|
||
this.playVideoWithVideojs(item.url);
|
||
},
|
||
//使用videojs播放视频
|
||
playVideoWithVideojs(url) {
|
||
var el = document.getElementById("myPlayer" + this.activeWinIndex);
|
||
if (!el) {
|
||
var pEl = document.getElementsByClassName("videoInner")[this.activeWinIndex - 1];
|
||
var idName = "myPlayer" + this.activeWinIndex;
|
||
var div2 =
|
||
'<video width="100%" height="100%" id="' +
|
||
idName +
|
||
'" autoplay="autoplay" class="videoClass" controls="controls" > <source type="application/x-mpegURL" src /> </video>';
|
||
pEl.innerHTML = div2;
|
||
this["videoObject" + this.activeWinIndex] = videojs(
|
||
"myPlayer" + this.activeWinIndex,
|
||
{
|
||
textTrackDisplay: false,
|
||
controlBar: false,
|
||
}
|
||
);
|
||
}
|
||
this["videoObject" + this.activeWinIndex].src([
|
||
{
|
||
type: "application/x-mpegURL",
|
||
src: url,
|
||
},
|
||
]);
|
||
this["videoObject" + this.activeWinIndex].play();
|
||
|
||
document.getElementsByClassName("noVideoBox1")[
|
||
this.activeWinIndex - 1
|
||
].style.display = "none";
|
||
document.getElementsByClassName("noVideoBox2")[
|
||
this.activeWinIndex - 1
|
||
].style.display = "block";
|
||
},
|
||
getX(obj) {
|
||
var parObj = obj;
|
||
var left = obj.offsetLeft;
|
||
while ((parObj = parObj.offsetParent)) {
|
||
left += parObj.offsetLeft;
|
||
}
|
||
return left;
|
||
},
|
||
getY(obj) {
|
||
var parObj = obj;
|
||
var top = obj.offsetTop;
|
||
while ((parObj = parObj.offsetParent)) {
|
||
top += parObj.offsetTop;
|
||
}
|
||
return top;
|
||
},
|
||
getPlaybackTime(event) {},
|
||
DisplayCoord(event) {
|
||
var top, left, oDiv;
|
||
// oDiv = document.getElementById("timeLineBox");
|
||
// top = getY(oDiv);
|
||
// left = this.getX(oDiv);
|
||
// + document.documentElement.scrollLeft
|
||
console.log(event.clientX);
|
||
document.getElementById("mouseLine").style.left = event.clientX - 1 + "px";
|
||
// document.getElementById("mp_y").innerHTML = (event.clientY - top + document.documentElement.scrollTop) - 2 +
|
||
// "px";
|
||
},
|
||
//获取视频播放url
|
||
getVideo(item) {
|
||
//videoType 1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
|
||
//playType 播放方式，1高清RTMP,2流畅RTMP,3高清HLS,4流畅HLS,5高清轻量级插件，6流畅轻量级插件
|
||
getVideoItemInfoApi({
|
||
itemId: item.itemId,
|
||
}).then((res) => {
|
||
var result = res.result;
|
||
var url = "";
|
||
if (item.videoType == 1) {
|
||
switch (Number(result.projectVideoConfig.playType)) {
|
||
case 1:
|
||
url = result.videoInfo.rtmpHd;
|
||
break;
|
||
case 2:
|
||
url = result.videoInfo.rtmp;
|
||
break;
|
||
case 3:
|
||
url = result.videoInfo.hdFlvAddress;
|
||
break;
|
||
case 4:
|
||
url = result.videoInfo.flvAddress;
|
||
break;
|
||
case 5:
|
||
url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.hd.live`;
|
||
break;
|
||
case 6:
|
||
url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`;
|
||
break;
|
||
default:
|
||
url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`;
|
||
break;
|
||
}
|
||
this.ysyParams.url = url;
|
||
this.ysyParams.accessToken = result.accessToken;
|
||
// this.$emit('playParams',{accessToken:result.accessToken,url:url,videoType:videoType,playType:result.projectVideoConfig.playType})
|
||
}
|
||
|
||
// if(videoType==2){
|
||
// // url=`imou://open.lechange.com/${item.serialNumber}/${item.channelId}/1?streamId=1`
|
||
// // this.$emit('playParams',{accessToken:result.accessToken,url:url,videoType:item.videoType})
|
||
// this.$emit('playParams',{accessToken:result.accessToken,url:item.liveRadioUrl,videoType:item.videoType})
|
||
// }
|
||
// console.log('视频播放url',url)
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import "./videoModule.less";
|
||
.videoOverview1 {
|
||
width: calc(100% - 32px) !important;
|
||
}
|
||
.isDockingToWoer {
|
||
position: relative;
|
||
left: 58px;
|
||
top: 83px;
|
||
}
|
||
.isLongguangIframe {
|
||
position: relative;
|
||
left: 2180px;
|
||
top: 276px;
|
||
}
|
||
// .isFullScreen{
|
||
// left: 2160px;
|
||
// top: 226px;
|
||
// }
|
||
#wrapper {
|
||
padding-top: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|