Skip to content

broadcast_cloud / web-live

Go to a project
Commit 41ea2900 by MichaelJier
Options

feaure 

1. 直播间支持vr直播
parent d8836db3
Showing with 59 additions and 37 deletions
components/modules-vertical/topBox/index.vue
...@@ -43,8 +43,8 @@ ...@@ -43,8 +43,8 @@
<script> <script>
import { getWatchNum, getWechatInfo } from '@/plugins/API/apiAll'; import { getWatchNum, getWechatInfo } from '@/plugins/API/apiAll';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
const followBox = resolve => require(['@/components/modules-vertical/followBox'], resolve); import followBox from '@/components/modules-vertical/followBox'
const inviteBox = resolve => require(['@/components/modules-vertical/inviteBox'], resolve); import inviteBox from '@/components/modules-vertical/inviteBox'
export default { export default {
name: 'vertical-top-box', name: 'vertical-top-box',
......
components/modules/playerBox/index.vue
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div id="mps" ref="mps" @click.stop="showD"> <div id="mps" ref="mps" @click.stop="showD" style="height: calc(9 / 16 * 100vw)">
<div class="mpstitle-name">{{ channelInfo.channelName }}</div> <div class="mpstitle-name">{{ channelInfo.channelName }}</div>
<div class="videoPlayer" id="videoPlayer" :style="{pointerEvents: (drainage.drainage_status === 0 || count || !(drainage.drainage_model || []).includes('0')) ? 'all' : 'none'}"> <div class="videoPlayer" id="videoPlayer" :style="{pointerEvents: (drainage.drainage_status === 0 || count || !(drainage.drainage_model || []).includes('0')) ? 'all' : 'none'}">
<div style="display:none;"> <div style="display:none;">
...@@ -107,12 +107,31 @@ export default { ...@@ -107,12 +107,31 @@ export default {
}; };
} }
return options; return options;
},
playerUrl() {
let playUrl = '';
let saveUrl = '';
if (this.channelInfo.liveStatus === 1) {
playUrl = this.channelInfo.livePlayHlsUrl;
saveUrl = this.channelInfo.livePlayHlsUrl;
} else if (this.channelInfo.vodUrl && this.channelInfo.vodStatus) {
playUrl = this.channelInfo.vodUrl;
saveUrl = this.channelInfo.vodUrl;
} else {
playUrl = 'http://';
saveUrl = 'http://';
}
return {
playUrl,
saveUrl
}
} }
}, },
mounted() { mounted() {
this.watermark(); this.watermark();
this.$nextTick(() => { this.$nextTick(() => {
this._mpsPlayerInit(); const { playUrl } = this.playerUrl
this._mpsPlayerInit(this.channelInfo.isVr, playUrl);
}); });
}, },
methods: { methods: {
...@@ -135,7 +154,7 @@ export default { ...@@ -135,7 +154,7 @@ export default {
watermark(`id: ${this.userInfo.id}`); watermark(`id: ${this.userInfo.id}`);
} }
}, },
_mpsPlayerInit() { _mpsPlayerInit(isVr, url) {
const self = this; const self = this;
const changeControlShow = (flag) => { const changeControlShow = (flag) => {
// flag ? this.$Bus.$emit('ws-stop') : this.$Bus.$emit('ws-start') // flag ? this.$Bus.$emit('ws-stop') : this.$Bus.$emit('ws-start')
...@@ -144,7 +163,7 @@ export default { ...@@ -144,7 +163,7 @@ export default {
if (this.mpsPlayerObj) { if (this.mpsPlayerObj) {
return false; return false;
} }
this.mpsPlayerObj = new mpsPlayer({ const playerOpts = {
container: 'videoPlayer', container: 'videoPlayer',
uin: this.channelInfo.aodianUin, uin: this.channelInfo.aodianUin,
appId: this.channelInfo.mpsDynamicVodAppId, appId: this.channelInfo.mpsDynamicVodAppId,
...@@ -173,36 +192,32 @@ export default { ...@@ -173,36 +192,32 @@ export default {
onReady() { onReady() {
self._resetConfig(); self._resetConfig();
// setTimeout(() => { // setTimeout(() => {
self.mpsPlayerObj.addPlayerCallback('Play.Stop', function(fn) { self.mpsPlayerObj.addPlayerCallback('Play.Stop', function(fn) {
fn({ type: 3 }); fn({ type: 3 });
}); });
self.mpsPlayerObj.addPlayerCallback('enterFullScreen', function() { self.mpsPlayerObj.addPlayerCallback('enterFullScreen', function() {
self.isFullScreen = true; self.isFullScreen = true;
}); });
self.mpsPlayerObj.addPlayerCallback('exitFullScreen', function() { self.mpsPlayerObj.addPlayerCallback('exitFullScreen', function() {
self.isFullScreen = false; self.isFullScreen = false;
}); });
// }, 2000); // }, 2000);
} }
}); }
if (isVr && url) {
playerOpts.type = 'vr'
playerOpts.url = url
}
this.mpsPlayerObj = new mpsPlayer(playerOpts);
}, },
_resetConfig() { _resetConfig() {
let playUrl = ''; const { playUrl, saveUrl } = this.playerUrl
let saveUrl = '';
if (this.channelInfo.liveStatus === 1) {
playUrl = this.channelInfo.livePlayHlsUrl;
saveUrl = this.channelInfo.livePlayHlsUrl;
} else if (this.channelInfo.vodUrl && this.channelInfo.vodStatus) {
playUrl = this.channelInfo.vodUrl;
saveUrl = this.channelInfo.vodUrl;
} else {
playUrl = 'http://';
saveUrl = 'http://';
}
this.set_playerInfo({ this.set_playerInfo({
playUrl: playUrl, playUrl: playUrl,
saveUrl: saveUrl, saveUrl: saveUrl,
cameraId: '' cameraId: '',
isVr: this.channelInfo.isVr
}); });
}, },
_reviseProtocol(url) { _reviseProtocol(url) {
...@@ -217,7 +232,7 @@ export default { ...@@ -217,7 +232,7 @@ export default {
} }
return path; return path;
}, },
_changePlayer() { _changePlayer(nowIsVr, oldIsVr) {
let obj = null; let obj = null;
if (this.channelInfo.hlsPwdStatus === 1) { if (this.channelInfo.hlsPwdStatus === 1) {
if (this.playerInfo.playUrl === this.channelInfo.livePlayHlsUrl) { if (this.playerInfo.playUrl === this.channelInfo.livePlayHlsUrl) {
...@@ -233,12 +248,18 @@ export default { ...@@ -233,12 +248,18 @@ export default {
} else { } else {
obj = this._reviseProtocol(this.playerInfo.playUrl); obj = this._reviseProtocol(this.playerInfo.playUrl);
} }
if (this.mpsPlayerObj && this.mpsPlayerObj.changePlayer) { if (this.mpsPlayerObj) {
if (this.onePlayer) { if (nowIsVr != oldIsVr) {
this.mpsPlayerObj.changePlayer(obj, false); console.log(nowIsVr, oldIsVr, 'change player')
this.onePlayer = false; this._mpsPlayerInit(nowIsVr, this.playerInfo.playUrl)
} else { } else {
this.mpsPlayerObj.changePlayer(obj); console.log(nowIsVr, oldIsVr, 'no change player')
if (this.onePlayer && this.mpsPlayerObj.changePlayer) {
this.mpsPlayerObj.changePlayer(obj, false);
this.onePlayer = false;
} else {
this.mpsPlayerObj.changePlayer(obj);
}
} }
} }
}, },
...@@ -250,8 +271,9 @@ export default { ...@@ -250,8 +271,9 @@ export default {
}, },
watch: { watch: {
playerInfo: { playerInfo: {
handler() { handler(newVal, oldVal) {
this._changePlayer(); console.log(newVal, oldVal)
this._changePlayer(newVal.isVr, oldVal.isVr);
}, },
deep: true deep: 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 sign in to comment