球幕视频的播放与暂停影响背景音乐的播放状态

src/views/SwkkView.vue

@@ -232,6 +232,7 @@ export default {
     }
   },
   beforeCreate() {
+    // 因为本组件卸载后，kankan会出错，导致再次挂载本组件后kankan无法正常运行，需要reload，所以做此处理。
     if (!location.href.endsWith('autoReload=true')) {
       location.href += '&autoReload=true'
       location.reload()
@@ -292,35 +293,6 @@ export default {
         })
       })
 
-      // // 有关球幕视频控制背景音乐
-      // kankan.Scene.on("panorama.videorenderer.startvideo", () => {
-      //   // 点击热点的时候当前背景音乐的播放状态
-      //   let dom = document.querySelector("#bacMusic")
-      //   window.bacMusic = !dom.paused
-      //   setTimeout(() => {
-      //     this.$refs.RbottomRef.opMusic(false)
-      //   }, 200)
-      //   // 暂停背景音乐
-      // })
-      // kankan.Scene.on("panorama.videorenderer.resumerender", () => {
-
-      //   // 点击热点的时候当前背景音乐的播放状态
-      //   let dom = document.querySelector("#bacMusic")
-      //   window.bacMusic = !dom.paused
-      //   setTimeout(() => {
-      //     this.$refs.RbottomRef.opMusic(false)
-      //   }, 200)
-      //   // 暂停背景音乐
-      // })
-      // kankan.Scene.on("panorama.videorenderer.suspendrender", () => {
-      //   if (window.bacMusic) {
-      //     setTimeout(() => {
-      //       this.$refs.RbottomRef.opMusic(true)
-      //     }, 100)
-      //   }
-      //   // 恢复背景音乐
-      // })
-
       // 导览数据
       kankan.TourManager.on("loaded", (tours) => {
         try {
@@ -338,61 +310,73 @@ export default {
       })
 
       // 热点
-      kankan
-        .use("TagView", {
-          render(data) {
-            let ifNeedShow = false
-            // data.title如果没有“&”或者是“a&b&show”这样子，就要显示。
-            let arrTitle = data.title.split("&")
-            if (arrTitle[2] === 'show' || !data.title.includes("&")) {
-              ifNeedShow = true
-            }
-
-            let title = data.title.split("&")[0]
-
-            return `
+      kankan.use("TagView", {
+        render(data) {
+          let ifNeedShow = false
+          // data.title如果没有“&”或者是“a&b&show”这样子，就要显示。
+          let arrTitle = data.title.split("&")
+          if (arrTitle[2] === 'show' || !data.title.includes("&")) {
+            ifNeedShow = true
+          }
+
+          let title = data.title.split("&")[0]
+
+          return `
               <span class="tag-icon animate" title=${title} style="${ifNeedShow ? "" : "display: none;"}; background-image: url({{icon}})"></span>
               <div class="tag-body"></div>
             `
-          },
-        })
-        .then((TagView) => {
-          // 监听手动点击事件
-          TagView.on("click", (e) => {
-            // // 点击热点的时候当前背景音乐的播放状态
-            // let dom = document.querySelector("#bacMusic")
-            // window.bacMusic = !dom.paused
-            // setTimeout(() => {
-            //   this.$refs.RbottomRef.opMusic(false)
-            // }, 200)
-
-            if (e.data.title.split("&")[1]) { // 如果是多个热点合并
-              let hotspotList = []
-              this.hotspotRawData.forEach((item) => {
-                if (item.title.split("&")[1] === e.data.title.split("&")[1]) {
-                  hotspotList.push(item)
-                }
-              })
-              let obj = {
-                image: [],
-                audio: [],
-                link: [],
-                video: [],
+        },
+      }).then((TagView) => {
+        // 监听手动点击事件
+        TagView.on("click", (e) => {
+          // // 点击热点的时候当前背景音乐的播放状态
+          // let dom = document.querySelector("#bacMusic")
+          // window.bacMusic = !dom.paused
+          // setTimeout(() => {
+          //   this.$refs.RbottomRef.opMusic(false)
+          // }, 200)
+
+          if (e.data.title.split("&")[1]) { // 如果是多个热点合并
+            let hotspotList = []
+            this.hotspotRawData.forEach((item) => {
+              if (item.title.split("&")[1] === e.data.title.split("&")[1]) {
+                hotspotList.push(item)
               }
-              hotspotList.forEach((hotspot) => {
-                obj[hotspot.type].push(hotspot)
-              })
-              this.hotspotDetail = obj
-            } else { // 单个热点
-              this.hotspotDetail = { [e.data.type]: [e.data] }
+            })
+            let obj = {
+              image: [],
+              audio: [],
+              link: [],
+              video: [],
             }
-
-            // 聚焦当前点击的热点
-            TagView.focus(e.data.sid)
-          })
+            hotspotList.forEach((hotspot) => {
+              obj[hotspot.type].push(hotspot)
+            })
+            this.hotspotDetail = obj
+          } else { // 单个热点
+            this.hotspotDetail = { [e.data.type]: [e.data] }
+          }
+
+          // 聚焦当前点击的热点
+          TagView.focus(e.data.sid)
         })
+      })
 
-      kankan.render()
+      // 球幕视频的播放与暂停影响背景音乐的播放状态
+      kankan.Scene.on("panorama.videorenderer.startvideo", () => {
+        console.log('startvideo')
+        this.mustMute()
+      })
+
+      kankan.Scene.on("panorama.videorenderer.suspendrender", () => {
+        console.log('suspend')
+        this.cancelMustMute()
+      })
+
+      kankan.Scene.on("panorama.videorenderer.resumerender", () => {
+        console.log('resume')
+        this.mustMute()
+      })
 
       kankan.Scene.on("loaded", () => {
         console.log('loaded!')
@@ -413,6 +397,7 @@ export default {
         }[toMode]
       })
 
+      kankan.render()
       this.kankan = kankan
       // }, 1000)
     }, 500)