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