Browse Source

1.修正了播放地址无法正常播放视频的问题,包含两个错误:

1.1修正播放器界面路由(此页面不需要layout边框,之前已经修复但在地图代码合并时又被错误覆盖)
1.2修正播放器id属性,此属性现在不需要父级组件传入(这是之前导致独立播放页面失效的主要原因)
2.调整滚动条美化样式到app.vue中,使其真正全局生效
pull/448/head
xiaoxie 3 years ago
parent
commit
6e4fc1e79b
  1. 20
      web_src/src/App.vue
  2. 23
      web_src/src/components/common/jessibuca.vue
  3. 2
      web_src/src/components/dialog/devicePlayer.vue
  4. 24
      web_src/src/layout/index.vue
  5. 20
      web_src/src/router/index.js

20
web_src/src/App.vue

@ -81,4 +81,24 @@ body,
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>

23
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 @@ export default {
forceNoOffscreen: false,
};
},
props: ['containerId', 'videoUrl', 'error', 'hasAudio', 'height'],
props: ['videoUrl', 'error', 'hasAudio', 'height'],
mounted() {
window.onerror = (msg) => {
// console.error(msg)
@ -71,19 +71,19 @@ export default {
},
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",
@ -204,19 +204,6 @@ export default {
});
},
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)
},

2
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">

24
web_src/src/layout/index.vue

@ -24,26 +24,6 @@ export default {
}
</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 @@ export default {
}
</style>
<style scoped>
.el-main {
margin: 0;
}
.fade-enter {
visibility: hidden;
opacity: 0;

20
web_src/src/router/index.js

@ -98,16 +98,6 @@ export default new VueRouter({
name: 'media',
component: media,
},
{
path: '/play/wasm/:url',
name: 'wasmPlayer',
component: wasmPlayer,
},
{
path: '/play/rtc/:url',
name: 'rtcPlayer',
component: rtcPlayer,
},
{
path: '/map',
name: 'devicePosition',
@ -125,5 +115,15 @@ export default new VueRouter({
name: 'deviceTree',
component: deviceTree,
},
{
path: '/play/wasm/:url',
name: 'wasmPlayer',
component: wasmPlayer,
},
{
path: '/play/rtc/:url',
name: 'rtcPlayer',
component: rtcPlayer,
},
]
})

Loading…
Cancel
Save