mirror of
https://gitee.com/pan648540858/wvp-GB28181-pro.git
synced 2026-05-27 07:27:49 +08:00
修复国标录像回放页面BUG
This commit is contained in:
lin
parent
676a59e5f7
commit
1adcd32e43
@ -273,6 +273,11 @@ export default {
|
|||||||
},
|
},
|
||||||
setPlaybackRate: function() {
|
setPlaybackRate: function() {
|
||||||
|
|
||||||
|
},
|
||||||
|
resize(width, height) {
|
||||||
|
if (jessibucaPlayer[this._uid]) {
|
||||||
|
jessibucaPlayer[this._uid].resize()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -50,7 +50,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="playerBox" style="width: 100%;">
|
<div id="playerBox" style="width: 100%;">
|
||||||
<div class="playBox" style="height: calc(100vh - 220px); width: 100%; background-color: #000000">
|
<div :class="{
|
||||||
|
'play-box': true,
|
||||||
|
'play-box-fullscreen': isFullScreen,
|
||||||
|
}">
|
||||||
<div
|
<div
|
||||||
v-if="playLoading"
|
v-if="playLoading"
|
||||||
style="position: relative; left: calc(50% - 32px); top: 43%; z-index: 100;color: #fff;float: left; text-align: center;"
|
style="position: relative; left: calc(50% - 32px); top: 43%; z-index: 100;color: #fff;float: left; text-align: center;"
|
||||||
@ -88,8 +91,13 @@
|
|||||||
@playTimeChange="showPlayTimeChange"
|
@playTimeChange="showPlayTimeChange"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="player-option-box">
|
<div :class="{
|
||||||
|
'player-option-box': true,
|
||||||
|
'player-option-box-bottom': isFullScreen
|
||||||
|
}">
|
||||||
|
<div v-if="showTime" class="time-line-show">{{ showTimeValue }}</div>
|
||||||
<VideoTimeline
|
<VideoTimeline
|
||||||
|
style="height: 55px"
|
||||||
ref="Timeline"
|
ref="Timeline"
|
||||||
:init-time="initTime"
|
:init-time="initTime"
|
||||||
:time-segments="timeSegments"
|
:time-segments="timeSegments"
|
||||||
@ -98,135 +106,134 @@
|
|||||||
@mousedown="timelineMouseDown"
|
@mousedown="timelineMouseDown"
|
||||||
@mouseup="mouseupTimeline"
|
@mouseup="mouseupTimeline"
|
||||||
/>
|
/>
|
||||||
<div v-if="showTime" class="time-line-show">{{ showTimeValue }}</div>
|
<div style="height: 40px; background-color: #383838; display: grid; grid-template-columns: 1fr 400px 1fr">
|
||||||
</div>
|
<div style="text-align: left;">
|
||||||
<div style="height: 40px; background-color: #383838; display: grid; grid-template-columns: 1fr 400px 1fr">
|
<div class="record-play-control" style="background-color: transparent; box-shadow: 0 0 10px transparent">
|
||||||
<div style="text-align: left;">
|
|
||||||
<div class="record-play-control" style="background-color: transparent; box-shadow: 0 0 10px transparent">
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
class="record-play-control-item iconfont icon-list"
|
|
||||||
title="列表"
|
|
||||||
@click="sidebarControl()"
|
|
||||||
/>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
class="record-play-control-item iconfont icon-camera1196054easyiconnet"
|
|
||||||
title="截图"
|
|
||||||
@click="snap()"
|
|
||||||
/>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
class="record-play-control-item iconfont icon-xiazai1"
|
|
||||||
title="下载录像"
|
|
||||||
@click="chooseTimeForRecord()"
|
|
||||||
/>
|
|
||||||
<!-- <a target="_blank" class="record-play-control-item iconfont icon-xiazai011" title="下载" @click="gbPause()" />-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<div class="record-play-control">
|
|
||||||
<a
|
|
||||||
v-if="chooseFileIndex > 0"
|
|
||||||
target="_blank"
|
|
||||||
class="record-play-control-item iconfont icon-diyigeshipin"
|
|
||||||
title="上一个"
|
|
||||||
@click="playLast()"
|
|
||||||
/>
|
|
||||||
<a
|
|
||||||
v-else
|
|
||||||
style="color: #acacac; cursor: not-allowed"
|
|
||||||
target="_blank"
|
|
||||||
class="record-play-control-item iconfont icon-diyigeshipin"
|
|
||||||
title="上一个"
|
|
||||||
/>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
class="record-play-control-item iconfont icon-kuaijin"
|
|
||||||
title="快退五秒"
|
|
||||||
@click="seekBackward()"
|
|
||||||
/>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
class="record-play-control-item iconfont icon-stop1"
|
|
||||||
style="font-size: 14px"
|
|
||||||
title="停止"
|
|
||||||
@click="stopPLay()"
|
|
||||||
/>
|
|
||||||
<a
|
|
||||||
v-if="playing"
|
|
||||||
target="_blank"
|
|
||||||
class="record-play-control-item iconfont icon-zanting"
|
|
||||||
title="暂停"
|
|
||||||
@click="pausePlay()"
|
|
||||||
/>
|
|
||||||
<a v-if="!playing" target="_blank" class="record-play-control-item iconfont icon-kaishi" title="播放" @click="play()" />
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
class="record-play-control-item iconfont icon-houtui"
|
|
||||||
title="快进五秒"
|
|
||||||
@click="seekForward()"
|
|
||||||
/>
|
|
||||||
<a
|
|
||||||
v-if="chooseFileIndex < detailFiles.length - 1"
|
|
||||||
target="_blank"
|
|
||||||
class="record-play-control-item iconfont icon-zuihouyigeshipin"
|
|
||||||
title="下一个"
|
|
||||||
@click="playNext()"
|
|
||||||
/>
|
|
||||||
<a
|
|
||||||
v-else
|
|
||||||
style="color: #acacac; cursor: not-allowed"
|
|
||||||
target="_blank"
|
|
||||||
class="record-play-control-item iconfont icon-zuihouyigeshipin"
|
|
||||||
title="下一个"
|
|
||||||
@click="playNext()"
|
|
||||||
/>
|
|
||||||
<el-dropdown @command="changePlaySpeed">
|
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="record-play-control-item record-play-control-speed"
|
class="record-play-control-item iconfont icon-list"
|
||||||
title="倍速播放"
|
title="列表"
|
||||||
>{{ playSpeed }}X</a>
|
@click="sidebarControl()"
|
||||||
<el-dropdown-menu slot="dropdown">
|
/>
|
||||||
<el-dropdown-item
|
|
||||||
v-for="item in playSpeedRange"
|
|
||||||
:key="item"
|
|
||||||
:command="item"
|
|
||||||
>{{ item }}X
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="text-align: right;">
|
|
||||||
<div class="record-play-control" style="background-color: transparent; box-shadow: 0 0 10px transparent">
|
|
||||||
<el-dropdown @command="changePlayer">
|
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="record-play-control-item record-play-control-speed"
|
class="record-play-control-item iconfont icon-camera1196054easyiconnet"
|
||||||
title="切换播放器"
|
title="截图"
|
||||||
>{{ playerLabel }}</a>
|
@click="snap()"
|
||||||
<el-dropdown-menu slot="dropdown">
|
/>
|
||||||
<el-dropdown-item command="jessibuca">Jessibuca</el-dropdown-item>
|
<a
|
||||||
<el-dropdown-item command="webRTC">WebRTC</el-dropdown-item>
|
target="_blank"
|
||||||
<el-dropdown-item command="h265web">H265Web</el-dropdown-item>
|
class="record-play-control-item iconfont icon-xiazai1"
|
||||||
</el-dropdown-menu>
|
title="下载录像"
|
||||||
</el-dropdown>
|
@click="chooseTimeForRecord()"
|
||||||
<a
|
/>
|
||||||
v-if="!isFullScreen"
|
<!-- <a target="_blank" class="record-play-control-item iconfont icon-xiazai011" title="下载" @click="gbPause()" />-->
|
||||||
target="_blank"
|
</div>
|
||||||
class="record-play-control-item iconfont icon-fangdazhanshi"
|
</div>
|
||||||
title="全屏"
|
<div style="text-align: center;">
|
||||||
@click="fullScreen()"
|
<div class="record-play-control">
|
||||||
/>
|
<a
|
||||||
<a
|
v-if="chooseFileIndex > 0"
|
||||||
v-else
|
target="_blank"
|
||||||
target="_blank"
|
class="record-play-control-item iconfont icon-diyigeshipin"
|
||||||
class="record-play-control-item iconfont icon-suoxiao1"
|
title="上一个"
|
||||||
title="全屏"
|
@click="playLast()"
|
||||||
@click="fullScreen()"
|
/>
|
||||||
/>
|
<a
|
||||||
|
v-else
|
||||||
|
style="color: #acacac; cursor: not-allowed"
|
||||||
|
target="_blank"
|
||||||
|
class="record-play-control-item iconfont icon-diyigeshipin"
|
||||||
|
title="上一个"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
class="record-play-control-item iconfont icon-kuaijin"
|
||||||
|
title="快退五秒"
|
||||||
|
@click="seekBackward()"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
class="record-play-control-item iconfont icon-stop1"
|
||||||
|
style="font-size: 14px"
|
||||||
|
title="停止"
|
||||||
|
@click="stopPLay()"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
v-if="playing"
|
||||||
|
target="_blank"
|
||||||
|
class="record-play-control-item iconfont icon-zanting"
|
||||||
|
title="暂停"
|
||||||
|
@click="pausePlay()"
|
||||||
|
/>
|
||||||
|
<a v-if="!playing" target="_blank" class="record-play-control-item iconfont icon-kaishi" title="播放" @click="play()" />
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
class="record-play-control-item iconfont icon-houtui"
|
||||||
|
title="快进五秒"
|
||||||
|
@click="seekForward()"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
v-if="chooseFileIndex < detailFiles.length - 1"
|
||||||
|
target="_blank"
|
||||||
|
class="record-play-control-item iconfont icon-zuihouyigeshipin"
|
||||||
|
title="下一个"
|
||||||
|
@click="playNext()"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
v-else
|
||||||
|
style="color: #acacac; cursor: not-allowed"
|
||||||
|
target="_blank"
|
||||||
|
class="record-play-control-item iconfont icon-zuihouyigeshipin"
|
||||||
|
title="下一个"
|
||||||
|
@click="playNext()"
|
||||||
|
/>
|
||||||
|
<el-dropdown @command="changePlaySpeed" placement="top">
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
class="record-play-control-item record-play-control-speed"
|
||||||
|
title="倍速播放"
|
||||||
|
>{{ playSpeed }}X</a>
|
||||||
|
<el-dropdown-menu slot="dropdown" :append-to-body="false">
|
||||||
|
<el-dropdown-item
|
||||||
|
v-for="item in playSpeedRange"
|
||||||
|
:key="item"
|
||||||
|
:command="item"
|
||||||
|
>{{ item }}X
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="text-align: right;">
|
||||||
|
<div class="record-play-control" style="background-color: transparent; box-shadow: 0 0 10px transparent">
|
||||||
|
<el-dropdown @command="changePlayer" placement="top">
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
class="record-play-control-item record-play-control-speed"
|
||||||
|
title="切换播放器"
|
||||||
|
>{{ playerLabel }}</a>
|
||||||
|
<el-dropdown-menu slot="dropdown" :append-to-body="false">
|
||||||
|
<el-dropdown-item command="jessibuca">Jessibuca</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="webRTC">WebRTC</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="h265web">H265Web</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
<a
|
||||||
|
v-if="!isFullScreen"
|
||||||
|
target="_blank"
|
||||||
|
class="record-play-control-item iconfont icon-fangdazhanshi"
|
||||||
|
title="全屏"
|
||||||
|
@click="fullScreen()"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
v-else
|
||||||
|
target="_blank"
|
||||||
|
class="record-play-control-item iconfont icon-suoxiao1"
|
||||||
|
title="全屏"
|
||||||
|
@click="fullScreen()"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -444,8 +451,10 @@ export default {
|
|||||||
const playerHeight = this.$refs.recordVideoPlayer.playerHeight
|
const playerHeight = this.$refs.recordVideoPlayer.playerHeight
|
||||||
screenfull.request(document.getElementById('playerBox'))
|
screenfull.request(document.getElementById('playerBox'))
|
||||||
screenfull.on('change', (event) => {
|
screenfull.on('change', (event) => {
|
||||||
this.$refs.recordVideoPlayer.resize(playerWidth, playerHeight)
|
|
||||||
this.isFullScreen = screenfull.isFullscreen
|
this.isFullScreen = screenfull.isFullscreen
|
||||||
|
if (this.$refs.recordVideoPlayer && this.$refs.recordVideoPlayer.resize) {
|
||||||
|
this.$refs.recordVideoPlayer.resize(playerWidth, playerHeight)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
this.isFullScreen = true
|
this.isFullScreen = true
|
||||||
},
|
},
|
||||||
@ -674,14 +683,31 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.player-option-box {
|
.player-option-box {
|
||||||
height: 50px
|
height: 95px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-option-box-bottom {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-line-show {
|
.time-line-show {
|
||||||
position: relative;
|
position: relative;
|
||||||
color: rgba(250, 249, 249, 0.89);
|
color: rgba(250, 249, 249, 0.89);
|
||||||
left: calc(50% - 85px);
|
top: -24px;
|
||||||
top: -72px;
|
height: 0;
|
||||||
|
width: stretch;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
text-shadow: 1px 0 #5f6b7c, -1px 0 #5f6b7c, 0 1px #5f6b7c, 0 -1px #5f6b7c, 1.1px 1.1px #5f6b7c, 1.1px -1.1px #5f6b7c, -1.1px 1.1px #5f6b7c, -1.1px -1.1px #5f6b7c;
|
text-shadow: 1px 0 #5f6b7c, -1px 0 #5f6b7c, 0 1px #5f6b7c, 0 -1px #5f6b7c, 1.1px 1.1px #5f6b7c, 1.1px -1.1px #5f6b7c, -1.1px 1.1px #5f6b7c, -1.1px -1.1px #5f6b7c;
|
||||||
}
|
}
|
||||||
|
.play-box {
|
||||||
|
width: 100%; aspect-ratio: 16 / 9;
|
||||||
|
background-color: #000000;
|
||||||
|
height: calc(100vh - 220px);
|
||||||
|
}
|
||||||
|
.play-box-fullscreen {
|
||||||
|
height: 100vh !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user