Commit 2e3c52fc authored by 毛线's avatar 毛线

临时解决视频播放问题

parent cee8066b
<template> <template>
<video ref="jswebrtc" style="width: 100%;height: 100%;object-fit: fill;" playsinline @click="(e) => handler().click(e)"/> <video ref="jswebrtc" :controls="!videoPlay" style="width: 100%;height: 100%;object-fit: fill;" playsinline @click="(e) => handler().click(e)"/>
</template> </template>
<script> <script>
import JSWebrtc from '@/utils/jswebrtc.min.js' import JSWebrtc from '@/utils/jswebrtc.min.js'
import { mapState } from 'vuex' import { mapState, mapMutations } from 'vuex'
export default { export default {
name: "WebRTCPlayer", name: "WebRTCPlayer",
props: { props: {
...@@ -23,6 +23,9 @@ export default { ...@@ -23,6 +23,9 @@ export default {
...mapState([ ...mapState([
'zoom', 'zoom',
]), ]),
...mapState('audio', [
'videoPlay',
]),
...mapState('audio', [ ...mapState('audio', [
'volumeMachine' 'volumeMachine'
]), ]),
...@@ -31,6 +34,9 @@ export default { ...@@ -31,6 +34,9 @@ export default {
volumeMachine(value) { volumeMachine(value) {
this.$refs.jswebrtc.volume = this.volumeMachine / 100 this.$refs.jswebrtc.volume = this.volumeMachine / 100
}, },
videoPlay() {
this.$refs.jswebrtc.play()
},
}, },
mounted() { mounted() {
this.$watch('videoSrc', () => { this.$watch('videoSrc', () => {
...@@ -48,6 +54,9 @@ export default { ...@@ -48,6 +54,9 @@ export default {
} }
}, },
methods: { methods: {
...mapMutations('audio', [
'SetVideoPlay',
]),
/** /**
* 初始化播放器并播放 * 初始化播放器并播放
* 两种调用方式 * 两种调用方式
...@@ -83,6 +92,7 @@ export default { ...@@ -83,6 +92,7 @@ export default {
handler() { handler() {
return { return {
click: (e) => { click: (e) => {
this.SetVideoPlay()
const { zoom } = this const { zoom } = this
const video = this.$refs.jswebrtc const video = this.$refs.jswebrtc
const { offsetWidth, offsetHeight } = video // 组件宽高 const { offsetWidth, offsetHeight } = video // 组件宽高
......
...@@ -54,8 +54,6 @@ export default { ...@@ -54,8 +54,6 @@ export default {
volumeMachine() {}, volumeMachine() {},
volumeBg(value) { volumeBg(value) {
this.bgAudio.volume = value / 100 this.bgAudio.volume = value / 100
this.bgAudio.volume = '0'
alert('背景音乐设置1' + value)
}, },
volumeButton(value) { volumeButton(value) {
this.uiClickAudio.volume = value / 100 this.uiClickAudio.volume = value / 100
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<img v-if="tabIndex === index" class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2019.png" alt=""> <img v-if="tabIndex === index" class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2019.png" alt="">
<img v-else class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/last_game%20%E6%8B%B7%E8%B4%9D%202.png" alt=""> <img v-else class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/last_game%20%E6%8B%B7%E8%B4%9D%202.png" alt="">
<div class="text">{{ text }}</div> <div class="text">{{ text }}</div>
<div v-if="index === 0" class="version">{{ `1.0.006` }}</div> <div v-if="index === 0" class="version">{{ `1.0.007` }}</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</div> </div>
<!-- 右侧的直播区域 --> <!-- 右侧的直播区域 -->
<div v-if="device" class="right-player"> <div v-if="device" class="right-player">
<!-- <RightPlayer :device="device"/> --> <RightPlayer :device="device"/>
</div> </div>
</div> </div>
<!-- 音量控制,临时 --> <!-- 音量控制,临时 -->
......
...@@ -6,6 +6,7 @@ export const state = () => ({ ...@@ -6,6 +6,7 @@ export const state = () => ({
volumeMachine: 100, // 机器音量 volumeMachine: 100, // 机器音量
volumeBg: 100, // 背景音量 volumeBg: 100, // 背景音量
volumeButton: 100, // 按钮音量 volumeButton: 100, // 按钮音量
videoPlay: false, // 是否曾经播放过
}) })
export const mutations = { export const mutations = {
...@@ -16,6 +17,7 @@ export const mutations = { ...@@ -16,6 +17,7 @@ export const mutations = {
state.play = new Date().getTime() state.play = new Date().getTime()
state.uiClickType = type state.uiClickType = type
state.uiClick = new Date().getTime() state.uiClick = new Date().getTime()
state.videoPlay = true
}, },
// 设置静音 // 设置静音
SetMute: (state, data) => { SetMute: (state, data) => {
...@@ -36,4 +38,7 @@ export const mutations = { ...@@ -36,4 +38,7 @@ export const mutations = {
state.volumeButton = +data state.volumeButton = +data
localStorage.setItem('volumeButton', data) localStorage.setItem('volumeButton', data)
}, },
SetVideoPlay: (state, data) => {
state.videoPlay = true
},
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment