合并分支 'test' 到 'dev'

Publisher 自动合并请求 [99UKxe7QN0oh9aZK0IepO]

## feaure
1. 直播间支持vr直播


------

## Merge branch 'test' of gitlab.aodianyun.com:broadcast_cloud/web-live into test


------

## feature
1. 横屏直播支持vr


------

## Merge branch 'dev' into test


------

## Merge branch 'dev' into test


------

## feat
1. pc、横屏竖屏均支持vr直播


------



查看合并请求 !176

components/modules-pc/playerBox/index.vue

@@ -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 {
         });
         });
       }
       }
     },
     },
-    _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 {
         },
         },
         ...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 {
             });
             });
           }, 2000);
           }, 2000);
         }
         }
-      });
+      }
+      if (isVr && url) {
+        playerOpts.type = 'vr'
+        playerOpts.url = url
+      }
+      this.mpsPlayerObj = new mpsPlayer(playerOpts);
     },
     },
     _resetConfig() {
     _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({
       this.set_playerInfo({
         playUrl: playUrl,
         playUrl: playUrl,
         saveUrl: saveUrl,
         saveUrl: saveUrl,
@@ -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 {
         };
         };
       }
       }
       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 {
         },
         },
         ...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 = '';
-      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({
       this.set_playerInfo({
         playUrl: playUrl,
         playUrl: playUrl,
         saveUrl: saveUrl,
         saveUrl: saveUrl,
@@ -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-vertical/topBox/index.vue

@@ -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);
-const inviteBox = resolve => require(['@/components/modules-vertical/inviteBox'], resolve);
+import followBox from '@/components/modules-vertical/followBox'
+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,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();
     this.$nextTick(() => {
     this.$nextTick(() => {
-      this._mpsPlayerInit();
+      const { playUrl } = this.playerUrl
+      this._mpsPlayerInit({
+        isVr: this.channelInfo.isVr,
+        url: playUrl
+      });
     });
     });
   },
   },
   methods: {
   methods: {
@@ -135,16 +157,19 @@ export default {
         watermark(`id: ${this.userInfo.id}`);
         watermark(`id: ${this.userInfo.id}`);
       }
       }
     },
     },
-    _mpsPlayerInit() {
+    _mpsPlayerInit({isVr, url, force}) {
       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')
         this.controlShow = flag
         this.controlShow = flag
       }
       }
-      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,
@@ -171,34 +196,30 @@ 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) {
-              fn({ type: 3 });
-            });
-            self.mpsPlayerObj.addPlayerCallback('enterFullScreen', function() {
-              self.isFullScreen = true;
-            });
-            self.mpsPlayerObj.addPlayerCallback('exitFullScreen', function() {
-              self.isFullScreen = false;
-            });
+          self.mpsPlayerObj.addPlayerCallback('Play.Stop', function(fn) {
+            fn({ type: 3 });
+          });
+          self.mpsPlayerObj.addPlayerCallback('enterFullScreen', function() {
+            self.isFullScreen = true;
+          });
+          self.mpsPlayerObj.addPlayerCallback('exitFullScreen', function() {
+            self.isFullScreen = false;
+          });
           // }, 2000);
           // }, 2000);
         }
         }
-      });
+      }
+      if (isVr && url) {
+        playerOpts.type = 'vr'
+        playerOpts.url = url
+      }
+      this.mpsPlayerObj = new mpsPlayer(playerOpts);
     },
     },
     _resetConfig() {
     _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({
       this.set_playerInfo({
         playUrl: playUrl,
         playUrl: playUrl,
         saveUrl: saveUrl,
         saveUrl: saveUrl,
@@ -233,9 +254,9 @@ 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 && 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);