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