feat(每日充值活动-->vap背景组件): 取消原生video组件兜底,安卓模式直接使用VapMp4Player
This commit is contained in:
parent
3634707fd0
commit
0828e9f115
@ -1,20 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="active-game-page">
|
<div class="active-game-page">
|
||||||
<video
|
|
||||||
v-if="!useVapPlayer"
|
|
||||||
ref="nativeVideoRef"
|
|
||||||
class="native-background-video"
|
|
||||||
:src="resolvedSrc"
|
|
||||||
autoplay
|
|
||||||
muted
|
|
||||||
loop
|
|
||||||
playsinline
|
|
||||||
webkit-playsinline
|
|
||||||
x5-playsinline
|
|
||||||
preload="auto"
|
|
||||||
></video>
|
|
||||||
<VapMp4Player
|
<VapMp4Player
|
||||||
v-else
|
|
||||||
v-model="backgroundVisible"
|
v-model="backgroundVisible"
|
||||||
class="vap-background"
|
class="vap-background"
|
||||||
:src="src"
|
:src="src"
|
||||||
@ -30,7 +16,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed, nextTick, onMounted, ref, watch } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { showError } from '@/utils/toast.js'
|
import { showError } from '@/utils/toast.js'
|
||||||
import VapMp4Player from '@/components/VapMp4Player.vue'
|
import VapMp4Player from '@/components/VapMp4Player.vue'
|
||||||
import { preloadVapConfig } from '@/utils/vapMp4Config.js'
|
import { preloadVapConfig } from '@/utils/vapMp4Config.js'
|
||||||
@ -44,63 +30,22 @@ const props = defineProps({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const backgroundVisible = ref(true)
|
const backgroundVisible = ref(true)
|
||||||
const nativeVideoRef = ref(null)
|
|
||||||
const useVapPlayer = ref(false)
|
|
||||||
const resolvedSrc = computed(() => resolveProtectedAssetUrl(props.src))
|
|
||||||
|
|
||||||
async function ensureNativeVideoPlayback() {
|
function preloadVap() {
|
||||||
await nextTick()
|
if (!props.src) {
|
||||||
|
|
||||||
const video = nativeVideoRef.value
|
|
||||||
if (!video) {
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
video.muted = true
|
preloadVapConfig(resolveProtectedAssetUrl(props.src))
|
||||||
video.defaultMuted = true
|
|
||||||
video.playsInline = true
|
|
||||||
video.setAttribute('playsinline', '')
|
|
||||||
video.setAttribute('webkit-playsinline', '')
|
|
||||||
video.setAttribute('x5-playsinline', '')
|
|
||||||
|
|
||||||
try {
|
|
||||||
await video.play()
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('Native background video autoplay failed:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function resolvePlaybackMode() {
|
|
||||||
useVapPlayer.value = false
|
|
||||||
|
|
||||||
if (!resolvedSrc.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
ensureNativeVideoPlayback()
|
|
||||||
|
|
||||||
const vapConfig = await preloadVapConfig(resolvedSrc.value)
|
|
||||||
if (vapConfig) {
|
|
||||||
useVapPlayer.value = true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleVapError(error) {
|
function handleVapError(error) {
|
||||||
console.error('VAP playback failed:', error)
|
console.error('VAP playback failed:', error)
|
||||||
useVapPlayer.value = false
|
showError(error?.message || 'VAP playback failed')
|
||||||
ensureNativeVideoPlayback()
|
|
||||||
|
|
||||||
if (!error?.message?.includes('VAP config')) {
|
|
||||||
showError(error?.message || 'VAP playback failed')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
resolvePlaybackMode()
|
preloadVap()
|
||||||
})
|
|
||||||
|
|
||||||
watch(resolvedSrc, () => {
|
|
||||||
resolvePlaybackMode()
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -108,12 +53,4 @@ watch(resolvedSrc, () => {
|
|||||||
.active-game-page {
|
.active-game-page {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.native-background-video {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user