From 6e4fc1e79b7b4b91d6eb36f6b5638fa902665a50 Mon Sep 17 00:00:00 2001 From: xiaoxie <hotcoffie@163.com> Date: 星期六, 23 四月 2022 23:34:36 +0800 Subject: [PATCH] 1.修正了播放地址无法正常播放视频的问题,包含两个错误: 1.1修正播放器界面路由(此页面不需要layout边框,之前已经修复但在地图代码合并时又被错误覆盖) 1.2修正播放器id属性,此属性现在不需要父级组件传入(这是之前导致独立播放页面失效的主要原因) 2.调整滚动条美化样式到app.vue中,使其真正全局生效 --- web_src/src/App.vue | 20 ++++++++++ web_src/src/components/dialog/devicePlayer.vue | 2 web_src/src/layout/index.vue | 24 ------------ web_src/src/components/common/jessibuca.vue | 23 ++--------- web_src/src/router/index.js | 20 +++++----- 5 files changed, 36 insertions(+), 53 deletions(-) diff --git a/web_src/src/App.vue b/web_src/src/App.vue index e114545..3590f73 100644 --- a/web_src/src/App.vue +++ b/web_src/src/App.vue @@ -81,4 +81,24 @@ text-align: center; padding-top: 0px !important; } + +/*瀹氫箟婊氬姩鏉¢珮瀹藉強鑳屾櫙 楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉$殑灏哄*/ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +/*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/ +::-webkit-scrollbar-track { + border-radius: 4px; + background-color: #F5F5F5; +} + +/*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/ +::-webkit-scrollbar-thumb { + border-radius: 4px; + background-color: #c8c8c8; + box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); +} </style> diff --git a/web_src/src/components/common/jessibuca.vue b/web_src/src/components/common/jessibuca.vue index d071185..d05890b 100644 --- a/web_src/src/components/common/jessibuca.vue +++ b/web_src/src/components/common/jessibuca.vue @@ -1,5 +1,5 @@ <template> - <div :id="containerId" :ref="containerId" @dblclick="fullscreenSwich"> + <div id="container" ref="containerId" @dblclick="fullscreenSwich" style="width: 100%"> <div class="buttons-box" id="buttonsBox"> <div class="buttons-box-left"> <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i> @@ -44,7 +44,7 @@ forceNoOffscreen: false, }; }, - props: ['containerId', 'videoUrl', 'error', 'hasAudio', 'height'], + props: ['videoUrl', 'error', 'hasAudio', 'height'], mounted() { window.onerror = (msg) => { // console.error(msg) @@ -71,19 +71,19 @@ }, methods: { updatePlayerDomSize() { - let dom = document.getElementById(this.containerId); + let dom = document.getElementById('container'); const width = dom.parentNode.clientWidth dom.style.width = width + 'px'; dom.style.height = (9 / 16) * width + "px"; }, create() { let options = {}; - console.log(this.$refs[this.containerId]) + console.log(this.$refs.containerId) console.log("hasAudio " + this.hasAudio) this.jessibuca = new window.Jessibuca(Object.assign( { - container: this.$refs[this.containerId], + container: this.$refs.containerId, videoBuffer: 0.2, // 鏈�澶х紦鍐叉椂闀匡紝鍗曚綅绉� isResize: true, decoder: "static/js/jessibuca/decoder.js", @@ -203,19 +203,6 @@ this.jessibuca.on('metadata', function () { }); - }, - resize() { - if (this.jessibuca) { - this.jessibuca.resize() - this.$nextTick(() => { - let dom = document.getElementById(this.containerId); - if (dom.parentNode.clientHeight == 0) { - dom.style.height = (9 / 16) * dom.clientWidth + "px" - } - dom.style.height = dom.parentNode.clientHeight + "px"; - dom.style.width = dom.parentNode.clientWidth + "px"; - }) - } }, playBtnClick: function (event) { this.play(this.videoUrl) diff --git a/web_src/src/components/dialog/devicePlayer.vue b/web_src/src/components/dialog/devicePlayer.vue index d3056ce..f0b4512 100644 --- a/web_src/src/components/dialog/devicePlayer.vue +++ b/web_src/src/components/dialog/devicePlayer.vue @@ -4,7 +4,7 @@ <el-dialog title="瑙嗛鎾斁" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()"> <!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> --> <div style="width: 100%; height: 100%"> - <player containerId="container" ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></player> + <player ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></player> </div> <div id="shared" style="text-align: right; margin-top: 1rem;"> <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick"> diff --git a/web_src/src/layout/index.vue b/web_src/src/layout/index.vue index 4fdbc72..dccf662 100644 --- a/web_src/src/layout/index.vue +++ b/web_src/src/layout/index.vue @@ -24,26 +24,6 @@ } </script> <style> -/*瀹氫箟婊氬姩鏉¢珮瀹藉強鑳屾櫙 楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉$殑灏哄*/ -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -/*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/ -::-webkit-scrollbar-track { - border-radius: 4px; - background-color: #F5F5F5; -} - -/*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/ -::-webkit-scrollbar-thumb { - border-radius: 4px; - background-color: #c8c8c8; - box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); -} - /*瀹氫箟鏍囬鏍�*/ .page-header { background-color: #FFFFFF; @@ -64,10 +44,6 @@ } </style> <style scoped> -.el-main { - margin: 0; -} - .fade-enter { visibility: hidden; opacity: 0; diff --git a/web_src/src/router/index.js b/web_src/src/router/index.js index 5a1d964..8844862 100644 --- a/web_src/src/router/index.js +++ b/web_src/src/router/index.js @@ -99,16 +99,6 @@ component: media, }, { - path: '/play/wasm/:url', - name: 'wasmPlayer', - component: wasmPlayer, - }, - { - path: '/play/rtc/:url', - name: 'rtcPlayer', - component: rtcPlayer, - }, - { path: '/map', name: 'devicePosition', component: devicePosition, @@ -125,5 +115,15 @@ name: 'deviceTree', component: deviceTree, }, + { + path: '/play/wasm/:url', + name: 'wasmPlayer', + component: wasmPlayer, + }, + { + path: '/play/rtc/:url', + name: 'rtcPlayer', + component: rtcPlayer, + }, ] }) -- Gitblit v1.8.0