完善h265web seek

This commit is contained in:
lin 2025-09-22 23:30:09 +08:00
parent 3a594f7bee
commit a706069e97
4 changed files with 57 additions and 4 deletions

View File

@ -1,6 +1,6 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 1291092 */ font-family: "iconfont"; /* Project id 1291092 */
src: url('iconfont.woff2?t=1758456390170') format('woff2'); src: url('iconfont.woff2?t=1758456390170') format('woff2')
} }
.iconfont { .iconfont {
@ -11,6 +11,34 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-a-bofangqi1:before {
content: "\ec17";
}
.icon-sanjiaoxing:before {
content: "\e7f1";
}
.icon-icon_gps:before {
content: "\e7f0";
}
.icon-yidingdaoweizhuangtai:before {
content: "\e7ef";
}
.icon-gps:before {
content: "\e8b6";
}
.icon-tongdao:before {
content: "\e7ee";
}
.icon-xiazailiebiao:before {
content: "\e7ed";
}
.icon-zoom-in:before { .icon-zoom-in:before {
content: "\e7eb"; content: "\e7eb";
} }

View File

@ -26,6 +26,7 @@
<div class="cloud-record-record-play-control" style="background-color: transparent; box-shadow: 0 0 10px transparent"> <div class="cloud-record-record-play-control" style="background-color: transparent; box-shadow: 0 0 10px transparent">
<a v-if="showListCallback" target="_blank" class="cloud-record-record-play-control-item iconfont icon-list" title="列表" @click="sidebarControl()" /> <a v-if="showListCallback" target="_blank" class="cloud-record-record-play-control-item iconfont icon-list" title="列表" @click="sidebarControl()" />
<a target="_blank" class="cloud-record-record-play-control-item iconfont icon-camera1196054easyiconnet" title="截图" @click="snap()" /> <a target="_blank" class="cloud-record-record-play-control-item iconfont icon-camera1196054easyiconnet" title="截图" @click="snap()" />
<a target="_blank" class="cloud-record-record-play-control-item iconfont icon-shuaxin11" title="刷新" @click="refresh()" />
<!-- <a target="_blank" class="cloud-record-record-play-control-item iconfont icon-xiazai011" title="下载" />--> <!-- <a target="_blank" class="cloud-record-record-play-control-item iconfont icon-xiazai011" title="下载" />-->
</div> </div>
</div> </div>
@ -54,6 +55,9 @@
</div> </div>
<div style="text-align: right;"> <div style="text-align: right;">
<div class="cloud-record-record-play-control" style="background-color: transparent; box-shadow: 0 0 10px transparent"> <div class="cloud-record-record-play-control" style="background-color: transparent; box-shadow: 0 0 10px transparent">
<div class="cloud-record-record-play-control-item record-play-control-player">
H265web
</div>
<a v-if="!isFullScreen" target="_blank" class="cloud-record-record-play-control-item iconfont icon-fangdazhanshi" title="全屏" @click="fullScreen()" /> <a v-if="!isFullScreen" target="_blank" class="cloud-record-record-play-control-item iconfont icon-fangdazhanshi" title="全屏" @click="fullScreen()" />
<a v-else target="_blank" class="cloud-record-record-play-control-item iconfont icon-suoxiao1" title="全屏" @click="fullScreen()" /> <a v-else target="_blank" class="cloud-record-record-play-control-item iconfont icon-suoxiao1" title="全屏" @click="fullScreen()" />
</div> </div>
@ -144,6 +148,9 @@ export default {
this.$destroy('recordVideoPlayer') this.$destroy('recordVideoPlayer')
}, },
methods: { methods: {
changePlayer(command) {
this.playerType = command
},
timeProcessMouseup(event) { timeProcessMouseup(event) {
this.isMousedown = false this.isMousedown = false
}, },
@ -174,6 +181,9 @@ export default {
snap() { snap() {
this.$refs.recordVideoPlayer.screenshot() this.$refs.recordVideoPlayer.screenshot()
}, },
refresh() {
this.$refs.recordVideoPlayer.playBtnClick()
},
playLast() { playLast() {
this.showLastCallback() this.showLastCallback()
}, },
@ -249,6 +259,9 @@ export default {
this.startTime = startTime this.startTime = startTime
}, },
seekRecord(playSeekValue) { seekRecord(playSeekValue) {
let streamInfo = this.streamInfo
let videoUrl = this.videoUrl
this.$refs.recordVideoPlayer.destroy()
this.$store.dispatch('cloudRecord/seek', { this.$store.dispatch('cloudRecord/seek', {
mediaServerId: this.streamInfo.mediaServerId, mediaServerId: this.streamInfo.mediaServerId,
app: this.streamInfo.app, app: this.streamInfo.app,
@ -258,6 +271,13 @@ export default {
}) })
.then((data) => { .then((data) => {
this.playerTime = playSeekValue this.playerTime = playSeekValue
setTimeout(() => {
this.streamInfo = streamInfo
this.videoUrl = videoUrl
}, 500)
}) })
.catch((error) => { .catch((error) => {
console.log(error) console.log(error)
@ -361,4 +381,8 @@ export default {
-1px 1px 0 black, /* 左下角阴影 */ -1px 1px 0 black, /* 左下角阴影 */
1px 1px 0 black; /* 右下角阴影 */ 1px 1px 0 black; /* 右下角阴影 */
} }
.record-play-control-player {
width: fit-content;
height: 32px;
}
</style> </style>

View File

@ -261,6 +261,7 @@ export default {
}, },
setPlaybackRate: function(speed) { setPlaybackRate: function(speed) {
h265webPlayer[this._uid].setPlaybackRate(speed) h265webPlayer[this._uid].setPlaybackRate(speed)
} }
} }
} }

View File

@ -5,7 +5,7 @@
@dblclick="fullscreenSwich" @dblclick="fullscreenSwich"
> >
<div style="width:100%; padding-top: 56.25%; position: relative;" /> <div style="width:100%; padding-top: 56.25%; position: relative;" />
<div id="buttonsBox" class="buttons-box"> <div id="buttonsBox" class="buttons-box" v-if="typeof showBtn == 'undefined' || showBtn">
<div class="buttons-box-left"> <div class="buttons-box-left">
<i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick" /> <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick" />
<i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause" /> <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause" />
@ -34,7 +34,7 @@
const jessibucaPlayer = {} const jessibucaPlayer = {}
export default { export default {
name: 'Jessibuca', name: 'Jessibuca',
props: ['videoUrl', 'error', 'hasAudio', 'height'], props: ['videoUrl', 'error', 'hasAudio', 'height', 'showBtn'],
data() { data() {
return { return {
playing: false, playing: false,
@ -266,7 +266,7 @@ export default {
if (jessibucaPlayer[this._uid]) { if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].destroy() jessibucaPlayer[this._uid].destroy()
} }
if (document.getElementById('buttonsBox') == null) { if (document.getElementById('buttonsBox') === null && (typeof this.showBtn === 'undefined' || this.showBtn)) {
this.$refs.container.appendChild(this.btnDom) this.$refs.container.appendChild(this.btnDom)
} }
jessibucaPlayer[this._uid] = null jessibucaPlayer[this._uid] = null