xxxxx666

src/App.vue

@@ -2,6 +2,7 @@
   <div id="app">
     <feedbackModal v-show="modalState == 'feedback'" />
     <router-view/>
+    <audio id="bg-music" src="@/assets/audio/musicBg.mp3" loop></audio>
   </div>
 </template>
 

src/main.js

@@ -24,3 +24,39 @@ new Vue({
   router,
   render: h => h(App),
 }).$mount('#app')
+
+
+document.addEventListener('DOMContentLoaded', function () {
+  const audioPlayer = document.getElementById('bg-music');
+  // const playPauseBtn = document.getElementById('playPauseBtn');
+
+
+  // function togglePlay() {
+  //     if (isPlaying) {
+  //         audioPlayer.pause();
+  //     } else {
+  //         audioPlayer.play();
+  //     }
+  //     isPlaying = !isPlaying;
+  // }
+
+  function checkIfActiveTab() {
+      // 判断当前标签页是否为活动标签页
+      if (document.hidden) {
+          // 当前标签页不是活动标签页，暂停音频
+          audioPlayer.pause();
+      } else {
+          // 当前标签页是活动标签页，如果之前是播放状态则继续播放
+          audioPlayer.play();
+      }
+  }
+
+  // 监听页面可见性变化
+  document.addEventListener('visibilitychange', checkIfActiveTab);
+
+  // 初始化时检查一次
+  checkIfActiveTab();
+
+  // 绑定按钮点击事件
+  // playPauseBtn.addEventListener('click', togglePlay);
+});

src/views/Home/homePage.vue

@@ -14,7 +14,8 @@
         </div>
         <div class="explore" @click="() => {
           state = 'product';
-          changeType(dataAll.product.list[0])
+          changeType(dataAll.product.list[0]);
+          changeBgMusic(true)
         }
           ">
           开始探索
@@ -257,9 +258,12 @@
     <!-- 视频播放页面 -->
     <div class="openVideo-box" v-if="isOpenVideo">
       <!-- <video :src="curOpenVideoItem.link" controls></video> -->
-      <videoBox class="videoBox" :src="curOpenVideoItem.link" :name="curOpenVideoItem.name" :baseUrl="baseUrl" />
+      <videoBox @play="changeBgMusic(false)" @pause="changeBgMusic(true)" class="videoBox" :src="curOpenVideoItem.link" :name="curOpenVideoItem.name" :baseUrl="baseUrl" />
       <!-- <div>{{ curOpenVideoItem.name }}</div> -->
-      <img @click="isOpenVideo = false" src="@/assets/images/home/close.png" alt="">
+      <img @click="() => {
+        isOpenVideo = false
+        changeBgMusic(true)
+      }" src="@/assets/images/home/close.png" alt="">
     </div>
     <!-- 村庄标签 -->
     <div class="v-labels info" :class="{ active: item.id == activeStep }" v-show="state == 'info'"
@@ -400,6 +404,15 @@ export default {
           this.getsceneScrollData();
         }, 500);
       }
+
+      if(val == 'route'){
+        this.changeBgMusic(false)
+      }else{
+        const bgMusicDom = document.getElementById('bg-music')
+        if(bgMusicDom.paused){
+          this.changeBgMusic(true)
+        }
+      }
     },
 
     isEndReached(newValue) {
@@ -639,6 +652,14 @@ export default {
 
       // this.changeDimension('3d')
     },
+    changeBgMusic(isPlay){
+      const bgMusicDom = document.getElementById("bg-music");
+      if(isPlay && bgMusicDom) {  
+        bgMusicDom.play()
+      }else if(!isPlay && bgMusicDom){
+        bgMusicDom.pause()
+      }
+    }
   },
   created() {
     // this.getInitData();
@@ -650,6 +671,7 @@ export default {
       this.debounce(this.scrollFn, 200, true),
       true
     );
+    window.changeBgMusic = this.changeBgMusic
 
     this.initVideos()
   },
@@ -1456,11 +1478,10 @@ export default {
 
           .result-html {
             margin-top: 15px;
-
             img {
+              width: 100%;
               margin: 15px 0;
             }
-
             p {
               color: #fff;
             }

src/views/Home/videoBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div class='video-box'>
-    <video @timeupdate="updateTime()" @click="() => { state ? stateChange(false) : '' }" id="curVideo"
+    <video @play="$emit('play')" @pause="$emit('pause')" @timeupdate="updateTime()" @click="() => { state ? stateChange(false) : '' }" id="curVideo"
       :src="`${baseUrl}/video/${src}`"></video>
     <img v-show="!state" @click="() => { stateChange(true) }" src="@/assets/images/home/play.png" alt="">
     <!-- <div class="progress-box">
@@ -54,6 +54,20 @@ export default {
     }
   },
   methods: {
+    changeBgMusic(isPlay){
+      const bgMusicDom = document.getElementById("bg-music");
+      if(isPlay && bgMusicDom) {  
+        bgMusicDom.play()
+      }else if(!isPlay && bgMusicDom){
+        bgMusicDom.pause()
+      }
+    },
+    onVideoPlay(){
+      this.changeBgMusic(false)
+    },
+    onVideoPause(){
+      this.changeBgMusic(true)
+    },
     // 播放
     stateChange(stateNew) {
       const video = document.getElementById('curVideo')
@@ -64,6 +78,7 @@ export default {
         video.pause()
       }
       this.state = stateNew
+      
     },
     timeToMinute(times) {
       var t = "";
@@ -191,7 +206,6 @@ export default {
         let clickProgress = this.progressValue / 100;
         curVideo.currentTime = curVideo.duration * clickProgress;
       }
-
     },
 
   },