改改改

Code/src/assets/styles/base.css

@@ -221,3 +221,4 @@ textarea {
     transform: scale(1.5);
   }
 }
+/* 隐藏静音按钮 */

Code/src/assets/styles/base.less

@@ -270,3 +270,18 @@ textarea {
     transform: scale(1.5);
   }
 }
+
+/* 隐藏静音按钮 */
+// video::-webkit-media-controls-mute-button {
+//   display: none !important;
+// }
+
+// /* 隐藏音量控制条 */
+// video::-webkit-media-controls-volume-control-container {
+//   display: none !important;
+// }
+
+// /* 隐藏音量调节滑块 */
+// video::-webkit-media-controls-volume-slider {
+//   display: none !important;
+// }

Code/src/components/VideoModel/index.tsx

@@ -37,7 +37,7 @@ function VideoModel({ isShow, src, closeFu, controls = false }: Props) {
       <video
         ref={videoRef}
         playsInline
-        muted
+        muted={!controls}
         webkit-playsinline='true'
         x5-video-player-type='h5'
         onEnded={closeFu}

Code/src/pages/A4dance/index.tsx

@@ -12,6 +12,7 @@ import VideoModel from '@/components/VideoModel'
 import Zhot from '@/components/Zhot'
 import history from '@/utils/history'
 import Zmap from '@/components/Zmap'
+import { bgmFu } from '@/utils/utilsSome'
 
 function A4dance() {
   const [baseSta, setBaseSta] = useState(window.location.href.includes('r=ren') ? true : false)
@@ -148,8 +149,20 @@ function A4dance() {
 
           {/* 左下角2个舞蹈 */}
           <div className='A4leftVideo'>
-            <div className='A4leftVideo1' onClick={() => setLeftVideo(1)}></div>
-            <div className='A4leftVideo2' onClick={() => setLeftVideo(2)}></div>
+            <div
+              className='A4leftVideo1'
+              onClick={() => {
+                bgmFu(false)
+                setLeftVideo(1)
+              }}
+            ></div>
+            <div
+              className='A4leftVideo2'
+              onClick={() => {
+                bgmFu(false)
+                setLeftVideo(2)
+              }}
+            ></div>
           </div>
         </div>
       ) : null}
@@ -162,7 +175,10 @@ function A4dance() {
               controls={true}
               isShow={leftVideo === 1}
               src={baseURL + 'dance/left1.mp4'}
-              closeFu={() => setLeftVideo(0)}
+              closeFu={() => {
+                bgmFu(true)
+                setLeftVideo(0)
+              }}
             />
           </div>
         </div>
@@ -175,7 +191,10 @@ function A4dance() {
               controls={true}
               isShow={leftVideo === 2}
               src={baseURL + 'dance/left2.mp4'}
-              closeFu={() => setLeftVideo(0)}
+              closeFu={() => {
+                bgmFu(true)
+                setLeftVideo(0)
+              }}
             />
           </div>
         </div>

Code/src/utils/utilsSome.ts

@@ -1,4 +1,15 @@
+// 移除dom
 export const domDelOwnFu = (classNmae: string) => {
   const dom = document.querySelector(classNmae)
   if (dom) dom.remove()
 }
+
+// 背景音乐的播放暂停
+export const bgmFu = (flag: boolean) => {
+  setTimeout(() => {
+    const audioDom: HTMLAudioElement = document.querySelector('#bgMp3')!
+    if (audioDom) {
+      flag ? audioDom.play() : audioDom.pause()
+    }
+  }, 100)
+}