From 53184b0ce284a6784356e1d1a2b57d86f6a9d5c1 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 28 Apr 2021 17:39:02 +0800
Subject: [PATCH] 地图 和详情 视频和 top 热力图细节
---
public/map/popup/html/FlareClusterLayer_v3 copy.html | 121 ++++++++++++++++++++++++++++-----------
1 files changed, 86 insertions(+), 35 deletions(-)
diff --git a/public/map/popup/html/FlareClusterLayer_v3 copy.html b/public/map/popup/html/FlareClusterLayer_v3 copy.html
index 879f236..b283b81 100644
--- a/public/map/popup/html/FlareClusterLayer_v3 copy.html
+++ b/public/map/popup/html/FlareClusterLayer_v3 copy.html
@@ -12,7 +12,10 @@
<!-- element ui -->
<link rel="stylesheet" href="../../lib/elementUi.css">
<script src="../../lib/elementUi.js"></script>
-
+ <!-- axios -->
+ <script src='../../lib/axios.js'></script>
+ <!-- 视频 -->
+ <script src='../../../realVideo/hls.js'></script>
<!-- layui -->
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
<style>
@@ -225,12 +228,8 @@
</div>
</el-tab-pane>
<el-tab-pane label="现场视频" name="second">
- <!-- {{aoud}} -->
- <div>
- <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
- <source id="source" :src="aoud" type="application/x-mpegURL"></source>
- </video>
- </div>
+ <video style="height: auto;width: 100%;" controls="controls" id="real_video_conversation" src="">
+ </video>
</el-tab-pane>
<!-- <el-tab-pane label="other" name="second">other</el-tab-pane> -->
</el-tabs>
@@ -254,7 +253,7 @@
// names: '',
contacts: '',
deptname: '',//使用方
- aoud: '',//视频
+ ourd: '',//视频data
calls: '',
imgsl: [],
deploymentTime: '',
@@ -362,39 +361,91 @@
if (xhr.status === 200) {
// 判断isJson是否传进来了
var data = JSON.parse(xhr.responseText);// JSON转js
- var ourd = data.data,
- cl = ourd.channelNumber,
- deviceCode = ourd.serialNumber;
- my.deptname = ourd.deptName;
- // console.log(data,1111111111111)
- var xhr2 = null//视频请求
- , url = 'https://web.byisf.com:18000/GetPlayUrl?deviceCode='+ deviceCode +'&chl=' + cl;
- if (XMLHttpRequest) { //http请求
- xhr2 = new XMLHttpRequest();
- } else {
- xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
-
- }
- xhr2.open("get", url, true);
- xhr2.send();
- xhr2.onreadystatechange = function () {
- if (xhr2.readyState === 4) {
- if (xhr2.status === 200) {
- // 判断isJson是否传进来了
- var data2 = JSON.parse(xhr2.responseText);// JSON转js
- my.aoud = data2.data.m3u8;
- // console.log(data2,222222222222)
-
- }
- }
- }
+ my.ourd = data.data;
+ my.deptname = my.ourd.deptName;
}
}
}
},
handleClick(tab, event) {//标签tab点击事件
// console.log(tab, event);
+ },
+ openRealVideoBox(serialNumber, channelNumber) {
+ var that = this;
+ var newAxios = axios.create({
+ baseURL: "https://web.byisf.com:18000",
+ withCredentials: false,
+ headers: {
+ "Content-type": "application/x-www-form-urlencoded",
+ },
+ });
+
+ //this.form.serialNumber
+ newAxios
+ .post(
+ "/api_control",
+ {},
+ {
+ params: {
+ param: JSON.stringify({ PktType: "GetAccessToken" }),
+ },
+ }
+ )
+ .then((res) => {
+ newAxios
+ .get(
+ `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
+ )
+ .then((result) => {
+ that.videoSource = result.data.data.m3u8;
+ if (Hls.isSupported()) {
+ var dom = document.getElementById("real_video_conversation");
+ that.hls = new Hls();
+ var m3u8Url = decodeURIComponent(that.videoSource);
+ that.hls.loadSource(m3u8Url);
+ that.hls.attachMedia(dom);
+ that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
+ dom.play();
+ });
+ that.hls.on(Hls.Events.ERROR, function (event, data) {
+ console.log(data, 4566824159, "视频播放有问题！！！");
+ if (data.fatal) {
+ switch (data.type) {
+ case Hls.ErrorTypes.NETWORK_ERROR:
+ // try to recover network error
+ console.log(
+ "fatal network error encountered, try to recover"
+ );
+ that.hls.startLoad();
+ break;
+ case Hls.ErrorTypes.MEDIA_ERROR:
+ console.log(
+ "fatal media error encountered, try to recover"
+ );
+ that.hls.recoverMediaError();
+ break;
+ }
+ }
+ })
+ }
+ })
+ })
}
+ },
+ watch: {
+ activeName() {
+ if (this.activeName == "second") {
+ this.i++;
+ this.openRealVideoBox(this.ourd.serialNumber, this.ourd.channelNumber);
+ } else {
+ var dom = document.getElementById("real_video_conversation");
+ if (dom.getAttribute("src") != "") {
+ dom.pause();
+ dom.setAttribute("src", "");
+ this.hls.destroy();
+ }
+ }
+ },
},
mounted() {
this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
@@ -404,7 +455,7 @@
this.getUser(this.ourData.id);
// console.log(this.ourData);
this.getdatas(this.ourData);
- },100);
+ }, 50);
}
--
Gitblit v1.9.3