feat(vap播放组件): 兼容苹果系统自动播放设置

src/views/Activities/DailyRecharge/index.vue

@@ -3,7 +3,6 @@
     <!-- 预加载状态 -->
     <div v-if="isLoading" class="loading-container">
       <!-- 页面背景 -->
-      <BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl('bg')]" />
 
       <!-- 加载动画 -->
       <LoadingSpinner />
@@ -14,15 +13,8 @@
     <div class="active-game-shell scroll">
       <div class="active-game-stage">
         <!-- 头部动画（带声音） -->
-        <VapBg class="vap-background-layer" :src="bgVapUrl" />
+        <VapBg class="vap-background-layer" />
         <!-- 页面背景 -->
-        <div class="page-background-layer">
-          <BackgroundLayer
-            :useCanvas="true"
-            :backgroundImages="[imageUrl('bg')]"
-            :layerStyle="{ position: 'absolute', top: 0, left: 0, minHeight: 0, zIndex: 0 }"
-          />
-        </div>
 
         <!-- 页面内容 -->
         <div class="page-content">
@@ -316,9 +308,14 @@ justify-content: flex-start;
                       justify-content: center;
                     "
                   >
-                    <div class="reward-showcase-vap-wrap" :key="mainRewardRenderKey">
+                    <div
+                      class="reward-showcase-vap-wrap"
+                      :key="mainRewardRenderKey"
+                      :class="{ 'reward-showcase-vap-wrap-playable': mainReward?.sourceUrl }"
+                      @click="playMainRewardPreview"
+                    >
                       <VapMp4Player
-                        v-if="mainReward.sourceUrl"
+                        v-if="mainReward.sourceUrl && rewardPreviewPlaying"
                         :model-value="true"
                         :src="mainReward.sourceUrl"
                         mode="inline"
@@ -331,12 +328,20 @@ justify-content: flex-start;
                         @error="handleRewardVapError"
                       />
                       <img
-                        v-else
+                        v-if="!mainReward.sourceUrl || !rewardPreviewPlaying"
                         :src="mainReward.cover || ''"
                         alt=""
                         style="display: block; width: 90%; object-fit: contain"
                         @error="(e) => handleRewardImageError(e, mainReward.type)"
                       />
+                      <button
+                        v-if="mainReward.sourceUrl && !rewardPreviewPlaying"
+                        type="button"
+                        class="reward-showcase-play-button"
+                        @click.stop="playMainRewardPreview"
+                      >
+                        <span class="reward-showcase-play-icon"></span>
+                      </button>
                     </div>
                   </div>
                   <div
@@ -490,11 +495,11 @@ justify-content: flex-start;
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { setDocumentDirection } from '@/locales/i18n'
 import { connectToApp } from '@/utils/appConnector.js'
-import { getMp4Url, getPngUrl } from '@/config/imagePaths.js'
+import { getPngUrl } from '@/config/imagePaths.js'
 import { preloadImages } from '@/utils/image/imagePreloader.js'
 import { useLangStore } from '@/stores/lang'
 import { showError } from '@/utils/toast.js'
@@ -510,7 +515,6 @@ import { handleRewardImageError } from '@/utils/image/imageHandler.js'
 import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
 import { useThrottle } from '@/utils/useDebounce.js'
 
-import BackgroundLayer from '@/components/BackgroundLayer.vue'
 import itemCenter from '@/components/itemCenter.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 import VapMp4Player from '@/components/VapMp4Player.vue'
@@ -531,8 +535,6 @@ const isRtlLayout = computed(() => {
 locale.value && setDocumentDirection(locale.value)
 
 const imageUrl = (filename) => getPngUrl('Activities/DailyRecharge/', filename)
-const mp4Url = (filename) => getMp4Url('Activities/DailyRecharge/', filename)
-const bgVapUrl = mp4Url('bg')
 const CHEST_PROGRESS_GAP_VW = 2
 const CHEST_PROGRESS_ITEM_WIDTH_VW = 14
 const CHEST_PROGRESS_FIRST_CENTER_VW = CHEST_PROGRESS_GAP_VW + CHEST_PROGRESS_ITEM_WIDTH_VW / 2
@@ -695,6 +697,8 @@ const rewardGridList = computed(() => {
 const mainRewardRenderKey = computed(() => {
   return mainReward.value ? getRewardRenderKey(mainReward.value, 0) : 'empty-main-reward'
 })
+const rewardPreviewPlaying = ref(false)
+const rewardVapPreloadElements = new Map()
 
 const isLocalRewardAsset = (reward) => {
   return Boolean(reward?.localRewardAsset)
@@ -715,6 +719,50 @@ const getRewardRenderKey = (reward, index) => {
   ].join('-')
 }
 
+const getRewardVapUrls = (rewardTopList) => {
+  return (rewardTopList || [])
+    .flatMap((rewardTop) => rewardTop?.propsGroup?.activityRewardProps || [])
+    .map((reward) => resolveProtectedAssetUrl(reward?.sourceUrl || ''))
+    .filter(Boolean)
+}
+
+const preloadRewardVap = (sourceUrl) => {
+  if (!sourceUrl || rewardVapPreloadElements.has(sourceUrl)) {
+    return
+  }
+
+  preloadVapConfig(sourceUrl)
+
+  if (typeof document === 'undefined') {
+    return
+  }
+
+  const preloadVideo = document.createElement('video')
+  preloadVideo.preload = 'auto'
+  preloadVideo.muted = true
+  preloadVideo.defaultMuted = true
+  preloadVideo.playsInline = true
+  preloadVideo.setAttribute('playsinline', '')
+  preloadVideo.setAttribute('webkit-playsinline', '')
+  preloadVideo.setAttribute('x5-playsinline', '')
+  preloadVideo.src = sourceUrl
+  preloadVideo.style.position = 'fixed'
+  preloadVideo.style.left = '-9999px'
+  preloadVideo.style.top = '0'
+  preloadVideo.style.width = '1px'
+  preloadVideo.style.height = '1px'
+  preloadVideo.style.opacity = '0'
+  preloadVideo.style.pointerEvents = 'none'
+  document.body.appendChild(preloadVideo)
+  preloadVideo.load()
+
+  rewardVapPreloadElements.set(sourceUrl, preloadVideo)
+}
+
+const preloadRewardVaps = (rewardTopList) => {
+  getRewardVapUrls(rewardTopList).forEach(preloadRewardVap)
+}
+
 const getExtraRewardsByLevel = (level) => {
   switch (Number(level)) {
     case 8:
@@ -814,9 +862,22 @@ const openPopup = (type) => {
 
 const handleRewardVapError = (error) => {
   console.error('Reward VAP playback failed:', error)
+  rewardPreviewPlaying.value = false
   showError(error?.message || t('active_game_vap_playback_failed'))
 }
 
+const playMainRewardPreview = () => {
+  if (!mainReward.value?.sourceUrl) {
+    return
+  }
+
+  rewardPreviewPlaying.value = true
+}
+
+watch(mainRewardRenderKey, () => {
+  rewardPreviewPlaying.value = false
+})
+
 const claimTask1Reward = useThrottle(async () => {
   if (!canClaimTask1Reward.value) {
     return
@@ -873,6 +934,7 @@ const getActivityRewards = async () => {
   const res = await apiGetActivityResource('DAILY_RECHARGE_TASK2')
   if (res.status && res.body) {
     activityRewards.value = Array.isArray(res.body) ? appendExtraRewards(res.body) : []
+    preloadRewardVaps(activityRewards.value)
   }
 }
 
@@ -883,7 +945,6 @@ const initData = async () => {
 const preloadCriticalImages = async () => {
   const chestImages = chestProgressList.value.map((chest) => imageUrl(getChestImageName(chest)))
   const criticalImages = [
-    imageUrl('bg'),
     imageUrl('totalRewardBg'),
     imageUrl('lvTaskBg'),
     imageUrl('LvRewardInfoBg'),
@@ -907,7 +968,6 @@ const preloadCriticalImages = async () => {
 
   await Promise.all([
     preloadImages(criticalImages),
-    preloadVapConfig(resolveProtectedAssetUrl(bgVapUrl)),
   ])
 }
 
@@ -931,6 +991,16 @@ const connectToAppHandler = async () => {
 onMounted(() => {
   connectToAppHandler()
 })
+
+onBeforeUnmount(() => {
+  rewardVapPreloadElements.forEach((video) => {
+    video.pause()
+    video.removeAttribute('src')
+    video.load()
+    video.parentNode && video.parentNode.removeChild(video)
+  })
+  rewardVapPreloadElements.clear()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -972,20 +1042,9 @@ onMounted(() => {
   isolation: isolate;
 }
 
-.page-background-layer {
-  position: absolute;
-  top: 120vw;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 0;
-  overflow: hidden;
-  pointer-events: none;
-}
-
 .vap-background-layer {
   width: 100vw;
-  height: 150vw;
+  height: auto;
   position: absolute;
   top: 0;
   left: 0;
@@ -1096,6 +1155,38 @@ onMounted(() => {
   justify-content: center;
 }
 
+.reward-showcase-vap-wrap-playable {
+  cursor: pointer;
+}
+
+.reward-showcase-play-button {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 10vw;
+  height: 10vw;
+  min-width: 36px;
+  min-height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.42);
+  transform: translate(-50%, -50%);
+}
+
+.reward-showcase-play-icon {
+  display: block;
+  width: 0;
+  height: 0;
+  margin-left: 0.4vw;
+  border-top: 1.8vw solid transparent;
+  border-bottom: 1.8vw solid transparent;
+  border-left: 2.8vw solid #fff;
+}
+
 .reward-showcase-grid {
   flex: 1;
   min-width: 0;

src/views/Activities/DailyRecharge/vapBg.vue

@@ -1,57 +1,17 @@
 <template>
-  <div class="active-game-page">
+  <img :src="BACKGROUND_IMAGE_URL" alt="" class="vap-image" />
-    <VapMp4Player
-      v-model="backgroundVisible"
-      class="vap-background"
-      :src="src"
-      mode="inline"
-      fit="cover"
-      :loop="true"
-      :mute="true"
-      :auto-close="false"
-      :show-status="false"
-      @error="handleVapError"
-    />
-  </div>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+const BACKGROUND_IMAGE_URL =
-import { showError } from '@/utils/toast.js'
+  'http://tkm-likei.oss-accelerate.aliyuncs.com/other/manager-ef352b4f-09a3-492b-8aa6-b8cf2d73ddd1.png'
-import VapMp4Player from '@/components/VapMp4Player.vue'
-import { preloadVapConfig } from '@/utils/vapMp4Config.js'
-import { resolveProtectedAssetUrl } from '@/utils/protectedAssets.js'
-
-const props = defineProps({
-  src: {
-    type: String,
-    default: '',
-  },
-})
-
-const backgroundVisible = ref(true)
-
-function preloadTestVap() {
-  if (props.src) {
-    preloadVapConfig(resolveProtectedAssetUrl(props.src))
-  }
-}
-
-function handleVapError(error) {
-  console.error('VAP playback failed:', error)
-  showError(error?.message || 'VAP playback failed')
-}
-
-onMounted(() => {
-  preloadTestVap()
-})
 </script>
 
 <style lang="scss" scoped>
-.active-game-page {
+.vap-image {
-  position: relative;
+  display: block;
-  width: 100%;
+  width: 100vw;
-  height: 100%;
+  height: auto;
-  overflow: hidden;
+  pointer-events: none;
 }
 </style>