upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

录像回放

Browse Source
dongguan-华为云
LAPTOP-S9HJSOEB\昊天 2 years ago
parent 4271e03da0
commit 30bd86f163
2 changed files with 402 additions and 258 deletions
Show Stats Download Patch File Download Diff File

5
src/api/http/http-api.js
Unescape Escape View File

@ -30,6 +30,11 @@ export default {
url: "/cameraRecord/record", url: "/cameraRecord/record",
name: "球机回放信息" name: "球机回放信息"
}, },
cameraRecordConvetor: {
method: "POST",
url: "/cameraRecord/convetor",
name: "视频转换"
},
addStreet: { addStreet: {
method: "POST", method: "POST",
url: "/street", url: "/street",

655
src/views/videoPlayback/index.vue
Unescape Escape View File

@ -1,68 +1,105 @@
<template> <template>
<a-row type="flex" :gutter="30">
<a-col :flex="1"> <a-row
时间：<a-date-picker v-model="date" format="YYYY-MM-DD" placeholder="请选择时间" @change="cameraRecord"/> type="flex"
<section style="height: 80vh;overflow: hidden; :gutter="30"
overflow-y: scroll;"> >
<a-tree
:tree-data="treeData"
:check-strictly="true"
@select="handleCheck">
</a-tree>
</section>
</a-col> <a-col :flex="1">
<a-col :flex="13"> 时间：<a-date-picker
<div> v-model="date"
<div class="time-display"> format="YYYY-MM-DD"
<!-- 视频 --> placeholder="请选择时间"
<video ref="videoPlayer" muted style=" display: flex;" width="100%" > @change="cameraRecord"
<source :src="currentVideoUrl" type="video/mp4" /> />
</video> <section style="height: 80vh;overflow: hidden;
</div> overflow-y: scroll;">
<!-- 滑动轴 --> <a-tree
<div class="zoom-buttons" width="100%" > :tree-data="treeData"
<!-- <a-button-group> :check-strictly="true"
@select="handleCheck"
>
</a-tree>
</section>
</a-col>
<a-col :flex="13">
<div>
<div class="time-display">
<!-- 视频 -->
<video
ref="videoPlayer"
muted
style=" display: flex;"
width="60%"
>
<source
:src="'http://192.168.1.110:8007'+currentVideoUrl"
type="video/mp4"
/>
</video>
</div>
<!-- 滑动轴 'http://192.168.1.110:8007'+currentVideoUrl -->
<div
class="zoom-buttons"
width="100%"
>
<!-- <a-button-group>
<a-button icon="arrows-alt" :disabled="zoom" @click="handleZoomIn"></a-button> <a-button icon="arrows-alt" :disabled="zoom" @click="handleZoomIn"></a-button>
<a-button icon="shrink" :disabled="shrink" @click="handleZoomOut"></a-button> <a-button icon="shrink" :disabled="shrink" @click="handleZoomOut"></a-button>
</a-button-group> --> </a-button-group> -->
</div> </div>
<a-slider
ref="slider"
:marks="marks"
class="progress-bar"
:max="totalDuration"
:tip-formatter="formatter"
:value="currentTime"
:disabled="Object.keys(urls).length === 0"
@change="onSliderChange"
/>
<div class="time-display">
<a-button-group>
<a-button
icon="step-backward"
:disabled="Object.keys(urls).length === 0"
@click="moveForward(-5)"
/>
<a-button
v-if="isPlaying"
:disabled="Object.keys(urls).length === 0"
icon="pause"
@click="pauseVideo"
/>
<a-button
v-else
icon="play-circle"
:disabled="Object.keys(urls).length === 0"
@click="playVideo"
/>
<a-button
icon="step-forward"
:disabled="Object.keys(urls).length === 0"
@click="moveForward(5)"
/>
</a-button-group>
</div>
</div>
</a-col>
</a-row>
<a-slider
ref="slider"
:marks="marks"
class="progress-bar"
:max="totalDuration"
:tip-formatter="formatter"
:value="currentTime"
:disabled="Object.keys(urls).length === 0"
@change="onSliderChange"
/>
<div class="time-display">
<a-button-group>
<a-button icon="step-backward" :disabled="Object.keys(urls).length === 0" @click="moveForward(-5)" />
<a-button v-if="isPlaying" :disabled="Object.keys(urls).length === 0" icon="pause" @click="pauseVideo" />
<a-button v-else icon="play-circle" :disabled="Object.keys(urls).length === 0" @click="playVideo" />
<a-button icon="step-forward" :disabled="Object.keys(urls).length === 0" @click="moveForward(5)" />
</a-button-group>
</div>
</div>
</a-col>
</a-row>
</template> </template>
<script> <script>
import { Slider, Button, ButtonGroup } from 'ant-design-vue'; import { Slider, Button, ButtonGroup } from "ant-design-vue";
import moment from 'moment' import moment from "moment";
import { message } from 'ant-design-vue'; import { message } from "ant-design-vue";
export default { export default {
components: { components: {
ASlider: Slider, ASlider: Slider,
@ -71,243 +108,322 @@ export default {
}, },
data() { data() {
return { return {
totalDuration: 24*60*60, // 假设视频总时长为60s totalDuration: 24 * 60 * 60, // 假设视频总时长为60s
//数据轴上的数值 //数据轴上的数值
currentTime: 0, currentTime: 0,
//数据轴上的开始时间 //数据轴上的开始时间
startTimeLong: 0, startTimeLong: 0,
//数据轴上的结束时间 //数据轴上的结束时间
endTimeLong: 24*60*60, endTimeLong: 24 * 60 * 60,
//当天记录的结束的时间绝对值 //当天记录的结束的时间绝对值
maxTimeLong:24*60*60, maxTimeLong: 24 * 60 * 60,
//当天记录的开始的时间绝对值 //当天记录的开始的时间绝对值
minTimeLong: 0*60*60, minTimeLong: 0 * 60 * 60,
date: this.getYesterday() , date: this.getYesterday(),
currentVideoUrl: '', // 当前视频的 URL currentVideoUrl: "", // 当前视频的 URL
value1: '2023-10-11', value1: "2023-10-11",
urls:{ urls: {},
}, mapByTime: {},
URLStartTime: 0, URLStartTime: 0,
isPlaying: false, // 视频是否正在播放 isPlaying: false, // 视频是否正在播放
marks:{}, marks: {},
zoom:false, zoom: false,
shrink:true, shrink: true,
treeData: [], treeData: [],
cameraId:'', cameraId: "",
playObject: {},
getSuccessUrl: [],
}; };
}, },
mounted() { mounted() {
const video = this.$refs.videoPlayer; const video = this.$refs.videoPlayer;
video.addEventListener('timeupdate', this.onVideoTimeUpdate); video.addEventListener("timeupdate", this.onVideoTimeUpdate);
video.addEventListener('ended', this.playNextVideo); video.addEventListener("ended", this.playNextVideo);
console.log(this.getTimeMap()); console.log(this.getTimeMap());
this.totalDuration = this.endTimeLong -this.startTimeLong; this.totalDuration = this.endTimeLong - this.startTimeLong;
this.marks = this.getTimeMap(); this.marks = this.getTimeMap();
console.log(this.date); console.log(this.date);
this.getTree() this.getTree();
this.cameraRecord() this.cameraRecord();
}, },
beforeDestroy() { beforeDestroy() {
const video = this.$refs.videoPlayer; const video = this.$refs.videoPlayer;
video.removeEventListener('timeupdate', this.onVideoTimeUpdate); video.removeEventListener("timeupdate", this.onVideoTimeUpdate);
video.removeEventListener('ended', this.playNextVideo); video.removeEventListener("ended", this.playNextVideo);
}, },
methods: { methods: {
getYesterday(){ videoControl(seconds) {
//获取playObject参数
this.binarySearchMax(seconds);
//后台获取资源
if (!this.getSuccessUrl.includes(this.currentVideoUrl)) {
//加载视频
this.$api.httpApi
.cameraRecordConvetor({
data: {
url: this.currentVideoUrl,
},
})
.then((res) => {
this.getSuccessUrl.push(this.currentVideoUrl);
});
}
//读取MP4文件
const video = this.$refs.videoPlayer;
this.isPlaying = true;
video.load(); // 重新加载视频资源
//计算时间
video.currentTime =
this.currentTime - this.playObject.startTimeLong;
//播放或停止
if (this.isPlaying) {
video.play();
} else {
video.pause();
}
},
//获取前一天
getYesterday() {
const now = moment(); const now = moment();
return now.subtract(1, 'days') return now.subtract(1, "days");
}, },
//放大缩小轴所用
scaleTime(rate) { scaleTime(rate) {
const middle = this.startTimeLong +this.currentTime; const middle = this.startTimeLong + this.currentTime;
// 计算开始时间到中间时间的毫秒数 // 计算开始时间到中间时间的毫秒数
const startToMiddleMs = middle - this.startTimeLong; const startToMiddleMs = middle - this.startTimeLong;
// 计算结束时间到中间时间的毫秒数 // 计算结束时间到中间时间的毫秒数
const endToMiddleMs = this.endTimeLong - middle; const endToMiddleMs = this.endTimeLong - middle;
// 缩小或放大开始时间 // 缩小或放大开始时间
const scaledStart = middle -Math.floor( startToMiddleMs * rate); const scaledStart = middle - Math.floor(startToMiddleMs * rate);
console.log("开始缩小时间"+ scaledStart); console.log("开始缩小时间" + scaledStart);
// 缩小或放大结束时间 // 缩小或放大结束时间
const scaledEnd =middle +Math.floor( endToMiddleMs * rate); const scaledEnd = middle + Math.floor(endToMiddleMs * rate);
console.log("结束缩小时间"+ scaledEnd); console.log("结束缩小时间" + scaledEnd);
// 检查是否超出当天时间的范围并赋值 // 检查是否超出当天时间的范围并赋值
this.startTimeLong = this.minTimeLong>scaledStart?this.minTimeLong : scaledStart; this.startTimeLong =
this.endTimeLong = this.maxTimeLong<scaledEnd?this.maxTimeLong : scaledEnd; this.minTimeLong > scaledStart ? this.minTimeLong : scaledStart;
this.endTimeLong =
this.maxTimeLong < scaledEnd ? this.maxTimeLong : scaledEnd;
//时间修改 //时间修改
if (
this.minTimeLong < scaledStart ||
if(this.minTimeLong<scaledStart || this.maxTimeLong>scaledEnd){ this.maxTimeLong > scaledEnd
this.shrink=false; ) {
}else{ this.shrink = false;
this.shrink=true; } else {
this.shrink = true;
} }
console.log("zhou"+middle); console.log("zhou" + middle);
this.updateslider(middle) this.updateslider(middle);
}, },
//获取当前时间
formatTime(seconds) { formatTime(seconds) {
seconds = seconds%(60*60*24); seconds = seconds % (60 * 60 * 24);
const hour = Math.floor(seconds / 3600); const hour = Math.floor(seconds / 3600);
const minute = Math.floor((seconds % 3600) / 60); const minute = Math.floor((seconds % 3600) / 60);
const second = seconds % 60; const second = seconds % 60;
return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`; return `${hour.toString().padStart(2, "0")}:${minute
.toString()
.padStart(2, "0")}:${second.toString().padStart(2, "0")}`;
}, },
// 点击放大按钮触发的方法 // 点击放大按钮触发的方法
handleZoomIn() { handleZoomIn() {
this.scaleTime(0.5);
this.scaleTime(0.5)
}, },
// 点击缩小按钮触发的方法 // 点击缩小按钮触发的方法
handleZoomOut() { handleZoomOut() {
this.scaleTime(2) this.scaleTime(2);
}, },
//根据开始时间修改时间轴（轴位置不变，请在外部修改） //根据开始时间修改时间轴（轴位置不变，请在外部修改）
updateslider(middle){ updateslider(middle) {
this.totalDuration = this.endTimeLong - this.startTimeLong; this.totalDuration = this.endTimeLong - this.startTimeLong;
console.log("轴上数值为："+(middle-this.startTimeLong)); console.log("轴上数值为：" + (middle - this.startTimeLong));
this.currentTime = (middle-this.startTimeLong); this.currentTime = middle - this.startTimeLong;
this.marks = this.getTimeMap(); this.marks = this.getTimeMap();
}, },
getTree(){ //巷道列表
this.$api.httpApi.getAllStreet({ getTree() {
}).then(res => { this.$api.httpApi
console.log("update data") .getAllStreet({})
for(let i = 0;i<res.data.length;i++){ .then((res) => {
// 创建空对象 console.log("update data");
const obj = {}; for (let i = 0; i < res.data.length; i++) {
// 添加属性和值 // 创建空对象
obj["title"] = res.data[i].name; const obj = {};
obj["key"] = res.data[i].id; // 添加属性和值
obj["type"] = 0 obj["title"] = res.data[i].name;
obj["children"] =[]; obj["key"] = res.data[i].id;
if( res.data[i].camera1Id !=""){ obj["type"] = 0;
const obj1 = {}; obj["children"] = [];
obj1["title"] = res.data[i].camera1Name if (res.data[i].camera1Id != "") {
obj1["key"] = res.data[i].camera1Id const obj1 = {};
obj1["type"] = 1 obj1["title"] = res.data[i].camera1Name;
obj["children"].push(obj1) obj1["key"] = res.data[i].camera1Id;
} obj1["type"] = 1;
if( res.data[i].camera2Id !=""){ obj["children"].push(obj1);
const obj1 = {}; }
obj1["title"] = res.data[i].camera2Name if (res.data[i].camera2Id != "") {
obj1["key"] = res.data[i].camera2Id const obj1 = {};
obj1["type"] = 1 obj1["title"] = res.data[i].camera2Name;
obj["children"].push(obj1) obj1["key"] = res.data[i].camera2Id;
obj1["type"] = 1;
obj["children"].push(obj1);
}
this.treeData.push(obj);
} }
this.treeData.push(obj) console.log(this.treeData);
} })
console.log(this.treeData); .catch((err) => {});
}).catch(err => {
});
}, },
//根据时间间隔调整横轴时间片段
getTimeMap() { getTimeMap() {
const diff = this.endTimeLong - this.startTimeLong; // 计算时间差，单位为秒 const diff = this.endTimeLong - this.startTimeLong; // 计算时间差，单位为秒
console.log(diff + " qqq"); console.log(diff + " qqq");
const map = {}; const map = {};
if (diff >= 60 * 60 * 3) { if (diff >= 60 * 60 * 3) {
this.TimeMapErgodic(60*60,map); this.TimeMapErgodic(60 * 60, map);
} else if (diff >= 60 * 60) { } else if (diff >= 60 * 60) {
// 如果大于等于1小时小于3小时每15分钟一个标识 // 如果大于等于1小时小于3小时每15分钟一个标识
this.TimeMapErgodic(15*60,map); this.TimeMapErgodic(15 * 60, map);
} else if (diff >= 60*20) { } else if (diff >= 60 * 20) {
this.zoom = false; this.zoom = false;
// 如果大于等于20分钟小于1小时每5分钟一个标识 // 如果大于等于20分钟小于1小时每5分钟一个标识
this.TimeMapErgodic(5*60,map); this.TimeMapErgodic(5 * 60, map);
} else if (diff >= 5* 60) { } else if (diff >= 5 * 60) {
this.zoom = false; this.zoom = false;
// 如果大于等于5分钟小于20分钟每分钟一个标识 // 如果大于等于5分钟小于20分钟每分钟一个标识
this.TimeMapErgodic(60,map); this.TimeMapErgodic(60, map);
} else if (diff >= 30) { } else if (diff >= 30) {
this.zoom = false; this.zoom = false;
// 如果小于5分钟大于1m每30s一个标识 // 如果小于5分钟大于1m每30s一个标识
console.log("如果小于5分钟大于1m每30s一个标识"); console.log("如果小于5分钟大于1m每30s一个标识");
console.log(startTime +" "+endTime) console.log(startTime + " " + endTime);
this.TimeMapErgodic(30,map); this.TimeMapErgodic(30, map);
} else if (diff >= 10) { } else if (diff >= 10) {
this.zoom = true; this.zoom = true;
// 如果小于1m大于10s 5s标识 // 如果小于1m大于10s 5s标识
this.TimeMapErgodic(5,map); this.TimeMapErgodic(5, map);
} else { } else {
this.zoom = true; this.zoom = true;
// 如果小于10s 1s标识 // 如果小于10s 1s标识
this.TimeMapErgodic(1,map); this.TimeMapErgodic(1, map);
} }
return map; return map;
}, },
//遍历获取time映射 //遍历获取time映射
TimeMapErgodic(interval,map){ TimeMapErgodic(interval, map) {
const startTime =Math.ceil(this.startTimeLong/(interval)) *interval; const startTime =
const endTime =Math.floor(this.endTimeLong/(interval))*interval; Math.ceil(this.startTimeLong / interval) * interval;
for (let i = startTime ; i<= endTime; i+=interval) { const endTime = Math.floor(this.endTimeLong / interval) * interval;
for (let i = startTime; i <= endTime; i += interval) {
const minuteDiff = (i - this.startTimeLong) ; const minuteDiff = i - this.startTimeLong;
map[minuteDiff] = `${String(Math.floor(i/(60*60))).padStart(2, '0')}:${String(Math.floor((i%(60*60))/(60))).padStart(2, '0')}:${String((i%(60))).padStart(2, '0')}`; map[minuteDiff] = `${String(Math.floor(i / (60 * 60))).padStart(
} 2,
"0"
)}:${String(Math.floor((i % (60 * 60)) / 60)).padStart(
2,
"0"
)}:${String(i % 60).padStart(2, "0")}`;
}
return map; return map;
}, },
//将秒数转为 时分秒 //将秒数转为 时分秒
formatter(value) { formatter(value) {
const i = this.startTimeLong + value const i = this.startTimeLong + value;
// 格式化输出新的时间 // 格式化输出新的时间
const hours = String(Math.floor(i/(60*60))).padStart(2, '0'); const hours = String(Math.floor(i / (60 * 60))).padStart(2, "0");
const minutes = String(Math.floor((i%(60*60))/(60))).padStart(2, '0'); const minutes = String(Math.floor((i % (60 * 60)) / 60)).padStart(
const seconds = String(Math.floor((i%(60)))).padStart(2, '0'); 2,
"0"
);
const seconds = String(Math.floor(i % 60)).padStart(2, "0");
return `${hours}:${minutes}:${seconds}`; return `${hours}:${minutes}:${seconds}`;
}, },
//二分法 //当改变横轴时，获取视频开始时间和url
binarySearchMax(arr, target) { binarySearchMax(target) {
let left = 0; var maxSmaller = null;
let right = arr.length - 1; let nums = Object.keys(this.mapByTime);
let max = -Infinity; //console.log(nums);
console.log(arr); let num = 0;
while (left <= right) { for (let numString of nums) {
const mid = Math.floor((left + right) / 2); num = parseInt(this.mapByTime[numString].endTimeLong);
if (target < num) {
this.playObject = this.mapByTime[numString];
if (
!(
target >
parseInt(this.mapByTime[numString].startTimeLong)
)
) {
this.currentTime = parseInt(
this.mapByTime[numString].startTimeLong
);
} else {
this.currentTime = target;
}
this.currentVideoUrl = this.playObject.url;
if (arr[mid] <= target) { console.log(this.currentVideoUrl);
max = Math.max(max, arr[mid]); break;
left = mid + 1;
} else {
right = mid - 1;
} }
} }
return max; return maxSmaller;
}, },
//横轴改变 //横轴改变
onSliderChange(value) { onSliderChange(value) {
console.log(value); this.videoControl(value);
this.URLStartTime = this.binarySearchMax(Object.keys(this.urls),value+this.minTimeLong);
this.currentVideoUrl = this.urls[this.URLStartTime]
this.currentTime = value;
const video = this.$refs.videoPlayer;
video.currentTime = value +this.startTimeLong-this.URLStartTime ;
}, },
//视频时间改变 //视频时间改变
onVideoTimeUpdate() { onVideoTimeUpdate() {
const video = this.$refs.videoPlayer; const video = this.$refs.videoPlayer;
console.log("视频时间"+(this.URLStartTime + video.currentTime)); console.log(
this.currentTime =this.URLStartTime + video.currentTime-this.startTimeLong; "视频时间" + (this.playObject.startTimeLong + video.currentTime)
);
this.currentTime =
this.playObject.startTimeLong +
video.currentTime -
this.startTimeLong;
}, },
//向后 //左右调整
moveForward(duration) { moveForward(duration) {
console.log("111"); console.log("111");
const newTime = this.currentTime + duration; this.videoControl(this.currentTime + duration)
if (newTime >= 0 ||newTime <= this.totalDuration) {
this.currentTime = newTime;
const video = this.$refs.videoPlayer;
video.currentTime = newTime;
}
}, },
playVideo() { playVideo() {
console.log(this.currentVideoUrl);
if (this.currentVideoUrl == null || this.currentVideoUrl == "") {
this.binarySearchMax(0);
}
//加载视频
console.log(this.getSuccessUrl.includes(this.currentVideoUrl));
if (!this.getSuccessUrl.includes(this.currentVideoUrl)) {
//加载视频
this.$api.httpApi
.cameraRecordConvetor({
data: {
url: this.currentVideoUrl,
},
})
.then((res) => {
this.getSuccessUrl.push(this.currentVideoUrl);
});
}
const video = this.$refs.videoPlayer; const video = this.$refs.videoPlayer;
this.isPlaying = true; this.isPlaying = true;
console.log( this.currentTime +this.startTimeLong - this.URLStartTime);
video.currentTime = this.currentTime +this.startTimeLong - this.URLStartTime video.load(); // 重新加载视频资源
video.currentTime =
this.currentTime - this.playObject.startTimeLong;
video.play(); video.play();
}, },
pauseVideo() { pauseVideo() {
@ -315,11 +431,9 @@ export default {
this.isPlaying = false; this.isPlaying = false;
video.pause(); video.pause();
}, },
playNextVideo() { playNextVideo() {
let nextKey =this.URLStartTime; let nextKey = this.URLStartTime;
const keys = Object.keys(this.urls); const keys = Object.keys(this.urls);
// 找到当前键的索引 // 找到当前键的索引
const currentIndex = keys.indexOf(this.URLStartTime.toString()); const currentIndex = keys.indexOf(this.URLStartTime.toString());
console.log(keys); console.log(keys);
@ -327,84 +441,109 @@ export default {
nextKey = Number(keys[currentIndex + 1]); nextKey = Number(keys[currentIndex + 1]);
const video = this.$refs.videoPlayer; const video = this.$refs.videoPlayer;
this.URLStartTime = nextKey; this.URLStartTime = nextKey;
this.currentVideoUrl = this.urls[nextKey] ; this.currentVideoUrl = this.urls[nextKey];
this.currentTime =this.URLStartTime; video.load(); // 重新加载视频资源
video.currentTime =0; this.currentTime = this.URLStartTime;
video.currentTime = 0;
video.play(); video.play();
} }
}, },
handleCheck(selectedKeys, e){ handleCheck(selectedKeys, e) {
if(e.selectedNodes[0].data.props.type == 1){ if (e.selectedNodes[0].data.props.type == 1) {
this.cameraId = e.selectedNodes[0].data.key; this.cameraId = e.selectedNodes[0].data.key;
console.log(e.selectedNodes[0].data); console.log(e.selectedNodes[0].data);
this.cameraRecord() this.cameraRecord();
} }
console.log(e.selectedNodes[0].data.props); console.log(e.selectedNodes[0].data.props);
}, },
cameraRecord(){ cameraRecord() {
this.$api.httpApi.cameraRecord({ this.$api.httpApi
data: { .cameraRecord({
date: this.date._d.getFullYear() + '-' + (this.date._d.getMonth() + 1) + '-' + this.date._d.getDate(), data: {
cameraId: this.cameraId, date:
} this.date._d.getFullYear() +
}).then(res => { "-" +
console.log("update data") (this.date._d.getMonth() + 1) +
if( (res.data.startTimeLong !== null && res.data.startTimeLong !== undefined && res.data.startTimeLong !== "") "-" +
||( res.data.endTimeLong !== null && res.data.endTimeLong!== undefined &&res.data.endTimeLong !== '')){ this.date._d.getDate(),
} cameraId: this.cameraId,
if(res.data.urls !== null && res.data.urls !== undefined && Object.keys(res.data.urls).length >0){ },
})
this.startTimeLong = res.data.startTimeLong .then((res) => {
this.endTimeLong = res.data.endTimeLong console.log("update data");
this.minTimeLong = res.data.startTimeLong if (
this.maxTimeLong = res.data.endTimeLong (res.data.startTimeLong !== null &&
this.currentTime = 0 res.data.startTimeLong !== undefined &&
this.totalDuration = res.data.endTimeLong - res.data.startTimeLong res.data.startTimeLong !== "") ||
this.currentVideoUrl = res.data.urls[0].url (res.data.endTimeLong !== null &&
const video = this.$refs.videoPlayer; res.data.endTimeLong !== undefined &&
video.currentTime = 0 ; res.data.endTimeLong !== "")
const map = {}; ) {
for(let i = 0;i<res.data.urls.length;i++){
map[res.data.urls[i].startTimeLong] = res.data.urls[i].url
} }
this.urls = map if (
res.data.urls !== null &&
this.marks = this.getTimeMap(); res.data.urls !== undefined &&
console.log(map); Object.keys(res.data.urls).length > 0
}else{ ) {
if(this.cameraId !== null && this.cameraId !== undefined && this.cameraId !== ""){ this.startTimeLong = res.data.startTimeLong;
message.info('此摄像头该日期未录像'); this.endTimeLong = res.data.endTimeLong;
} this.minTimeLong = res.data.startTimeLong;
this.maxTimeLong = res.data.endTimeLong;
} this.currentTime = 0;
}).catch(err => { this.totalDuration =
console.log(err); res.data.endTimeLong - res.data.startTimeLong;
const map = {};
const mapByTime = {};
for (let i = 0; i < res.data.urls.length; i++) {
map[res.data.urls[i].startTimeLong] =
res.data.urls[i].url;
}
for (let i = 0; i < res.data.urls.length; i++) {
mapByTime[res.data.urls[i].startTimeLong] =
res.data.urls[i];
}
this.urls = map;
this.mapByTime = mapByTime;
}); this.marks = this.getTimeMap();
} console.log(map);
} else {
if (
this.cameraId !== null &&
this.cameraId !== undefined &&
this.cameraId !== ""
) {
message.info("此摄像头该日期未录像");
}
}
})
.catch((err) => {
console.log(err);
});
},
}, },
}; };
</script> </script>
<style> <style>
.progress-bar .ant-slider-rail { .progress-bar .ant-slider-rail {
background-color: lightgray; background-color: lightgray;
} }
.progress-bar .ant-slider-track { .progress-bar .ant-slider-track {
background-color: dodgerblue; background-color: dodgerblue;
} }
.time-display { .time-display {
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.zoom-buttons { .zoom-buttons {
text-align: right; text-align: right;
margin-bottom: 16px; margin-bottom: 16px;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save