Skip to content

broadcast_cloud / web-live

Go to a project
Commit 3e2de499 by MichaelJier
Options

feat 

1. pc、横屏竖屏均支持vr直播
parent fff7d47c
Showing with 95 additions and 63 deletions
components/modules-pc/playerBox/index.vue
...@@ -66,12 +66,34 @@ export default { ...@@ -66,12 +66,34 @@ 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();
const { playUrl } = this.playerUrl
this.$nextTick(() => { this.$nextTick(() => {
this._mpsPlayerInit(); this._mpsPlayerInit({
isVr: this.channelInfo.isVr,
url: playUrl
});
}); });
}, },
methods: { methods: {
...@@ -87,12 +109,15 @@ export default { ...@@ -87,12 +109,15 @@ export default {
}); });
} }
}, },
_mpsPlayerInit() { _mpsPlayerInit({isVr, url, force}) {
const self = this; const self = this;
if (this.mpsPlayerObj) { if (this.mpsPlayerObj && !force) {
return false; return false;
} }
this.mpsPlayerObj = new mpsPlayer({ if (this.channelInfo.isVr) {
self._resetConfig();
}
const playerOpts = {
container: 'videoPlayer', container: 'videoPlayer',
uin: this.channelInfo.aodianUin, uin: this.channelInfo.aodianUin,
appId: this.channelInfo.mpsDynamicVodAppId, appId: this.channelInfo.mpsDynamicVodAppId,
...@@ -114,7 +139,9 @@ export default { ...@@ -114,7 +139,9 @@ export default {
}, },
...this.mpsOptions, ...this.mpsOptions,
onReady() { onReady() {
self._resetConfig(); if (!self.channelInfo.isVr) {
self._resetConfig();
}
setTimeout(() => { setTimeout(() => {
self.mpsPlayerObj.addPlayerCallback('Play.Stop', function(fn) { self.mpsPlayerObj.addPlayerCallback('Play.Stop', function(fn) {
fn({ type: 3 }); fn({ type: 3 });
...@@ -127,21 +154,15 @@ export default { ...@@ -127,21 +154,15 @@ export default {
}); });
}, 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,
...@@ -178,7 +199,7 @@ export default { ...@@ -178,7 +199,7 @@ export default {
} }
if (this.mpsPlayerObj && this.mpsPlayerObj.changePlayer) { if (this.mpsPlayerObj && this.mpsPlayerObj.changePlayer) {
if (this.onePlayer) { if (this.onePlayer) {
this.mpsPlayerObj.changePlayer(obj, false); this.mpsPlayerObj.changePlayer(obj, !!this.channelInfo.isVr);
this.onePlayer = false; this.onePlayer = false;
} else { } else {
this.mpsPlayerObj.changePlayer(obj); this.mpsPlayerObj.changePlayer(obj);
......
components/modules-vertical/playerBox/index.vue
...@@ -46,23 +46,48 @@ export default { ...@@ -46,23 +46,48 @@ 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.$nextTick(() => { this.$nextTick(() => {
this._mpsPlayerInit(); const { playUrl } = this.playerUrl
this._mpsPlayerInit({
isVr: this.channelInfo.isVr,
url: playUrl
});
}); });
}, },
methods: { methods: {
...mapMutations({ ...mapMutations({
set_playerInfo: 'set_playerInfo' set_playerInfo: 'set_playerInfo'
}), }),
_mpsPlayerInit() { _mpsPlayerInit({isVr, url, force}) {
const self = this; const self = this;
if (this.mpsPlayerObj) { if (this.mpsPlayerObj && !force) {
return false; return false;
} }
this.mpsPlayerObj = new mpsPlayer({ if (this.channelInfo.isVr) {
self._resetConfig();
}
const playerOpts = {
container: 'videoPlayer', container: 'videoPlayer',
uin: this.channelInfo.aodianUin, uin: this.channelInfo.aodianUin,
appId: this.channelInfo.mpsDynamicVodAppId, appId: this.channelInfo.mpsDynamicVodAppId,
...@@ -86,29 +111,25 @@ export default { ...@@ -86,29 +111,25 @@ export default {
}, },
...this.mpsOptions, ...this.mpsOptions,
onReady() { onReady() {
if (!self.channelInfo.isVr) {
self._resetConfig();
}
document.getElementById('video-Control').style.visibility = 'hidden' document.getElementById('video-Control').style.visibility = 'hidden'
self._resetConfig();
setTimeout(() => { setTimeout(() => {
self.mpsPlayerObj.addPlayerCallback('Play.Stop', function(fn) { self.mpsPlayerObj.addPlayerCallback('Play.Stop', function(fn) {
fn({ type: 3 }); fn({ type: 3 });
}); });
}, 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,
...@@ -166,6 +187,8 @@ export default { ...@@ -166,6 +187,8 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.player { .player {
position: relative; position: relative;
width: 100%;
height: 100%;
::v-deep div { ::v-deep div {
box-sizing: unset; box-sizing: unset;
} }
......
components/modules/cameraBox/index.vue
...@@ -56,7 +56,6 @@ export default { ...@@ -56,7 +56,6 @@ export default {
const info = JSON.parse(JSON.stringify(this.playerInfo)); const info = JSON.parse(JSON.stringify(this.playerInfo));
info.playUrl = url; info.playUrl = url;
info.cameraId = id; info.cameraId = id;
info.isVr = false;
this.set_playerInfo(info); this.set_playerInfo(info);
} }
} }
......
components/modules/menuBox/menuClass/playLists/index.vue
...@@ -67,7 +67,6 @@ export default { ...@@ -67,7 +67,6 @@ export default {
const info = JSON.parse(JSON.stringify(this.playerInfo)); const info = JSON.parse(JSON.stringify(this.playerInfo));
info.playUrl = url; info.playUrl = url;
info.cameraId = ''; info.cameraId = '';
info.isVr = false;
this.set_playerInfo(info); this.set_playerInfo(info);
}, },
_toggle() { _toggle() {
......
components/modules/playerBox/index.vue
...@@ -166,6 +166,9 @@ export default { ...@@ -166,6 +166,9 @@ export default {
if (this.mpsPlayerObj && !force) { if (this.mpsPlayerObj && !force) {
return false; return false;
} }
if (this.channelInfo.isVr) {
self._resetConfig();
}
const playerOpts = { const playerOpts = {
container: 'videoPlayer', container: 'videoPlayer',
uin: this.channelInfo.aodianUin, uin: this.channelInfo.aodianUin,
...@@ -193,8 +196,8 @@ export default { ...@@ -193,8 +196,8 @@ export default {
}, },
...this.mpsOptions, ...this.mpsOptions,
onReady() { onReady() {
if (url === self.playerUrl.playUrl) { if (!self.channelInfo.isVr) {
self._resetConfig(); self._resetConfig();
} }
// setTimeout(() => { // setTimeout(() => {
self.mpsPlayerObj.addPlayerCallback('Play.Stop', function(fn) { self.mpsPlayerObj.addPlayerCallback('Play.Stop', function(fn) {
...@@ -213,7 +216,6 @@ export default { ...@@ -213,7 +216,6 @@ export default {
playerOpts.type = 'vr' playerOpts.type = 'vr'
playerOpts.url = url playerOpts.url = url
} }
this.mpsPlayerObj = new mpsPlayer(playerOpts); this.mpsPlayerObj = new mpsPlayer(playerOpts);
}, },
_resetConfig() { _resetConfig() {
...@@ -221,8 +223,7 @@ export default { ...@@ -221,8 +223,7 @@ export default {
this.set_playerInfo({ this.set_playerInfo({
playUrl: playUrl, playUrl: playUrl,
saveUrl: saveUrl, saveUrl: saveUrl,
cameraId: '', cameraId: ''
isVr: !!this.channelInfo.isVr
}); });
}, },
_reviseProtocol(url) { _reviseProtocol(url) {
...@@ -237,7 +238,7 @@ export default { ...@@ -237,7 +238,7 @@ export default {
} }
return path; return path;
}, },
_changePlayer(nowIsVr, oldIsVr) { _changePlayer() {
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) {
...@@ -253,22 +254,12 @@ export default { ...@@ -253,22 +254,12 @@ export default {
} else { } else {
obj = this._reviseProtocol(this.playerInfo.playUrl); obj = this._reviseProtocol(this.playerInfo.playUrl);
} }
if (this.mpsPlayerObj) { if (this.mpsPlayerObj && this.mpsPlayerObj.changePlayer) {
if (nowIsVr != oldIsVr && (nowIsVr !== undefined && oldIsVr !== undefined)) { if (this.onePlayer) {
console.log(nowIsVr, oldIsVr, 'change player') this.mpsPlayerObj.changePlayer(obj, !!this.channelInfo.isVr);
this._mpsPlayerInit({ this.onePlayer = false;
isVr: nowIsVr,
url: this.playerInfo.playUrl,
force: true
})
} else { } else {
console.log(nowIsVr, oldIsVr, 'no change player') this.mpsPlayerObj.changePlayer(obj);
if (this.onePlayer && this.mpsPlayerObj.changePlayer) {
this.mpsPlayerObj.changePlayer(obj, false);
this.onePlayer = false;
} else {
this.mpsPlayerObj.changePlayer(obj);
}
} }
} }
}, },
...@@ -280,8 +271,8 @@ export default { ...@@ -280,8 +271,8 @@ export default {
}, },
watch: { watch: {
playerInfo: { playerInfo: {
handler(newVal, oldVal) { handler() {
this._changePlayer(newVal.isVr, oldVal.isVr); this._changePlayer();
}, },
deep: true deep: true
}, },
......
components/modules/playerBox/more.vue
...@@ -45,7 +45,6 @@ export default { ...@@ -45,7 +45,6 @@ export default {
const info = JSON.parse(JSON.stringify(this.playerInfo)); const info = JSON.parse(JSON.stringify(this.playerInfo));
info.playUrl = info.saveUrl; info.playUrl = info.saveUrl;
info.cameraId = ''; info.cameraId = '';
info.isVr = false;
this.set_playerInfo(info); this.set_playerInfo(info);
}, },
_setBarrage() { _setBarrage() {
......
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