hookehuyr

feat(Splash): 添加视频自动播放处理逻辑

添加对微信环境下视频自动播放被阻止的处理,通过WeixinJSBridge尝试重新播放
......@@ -43,3 +43,5 @@ coverage/
.history/
stdj
dist.tar.gz
......
......@@ -2,6 +2,7 @@
<div class="splash-container" :class="{ 'fade-out': isExiting }">
<!-- 背景视频 -->
<video
ref="videoPlayer"
class="background-video"
autoplay
muted
......@@ -48,6 +49,7 @@ import { useRouter } from 'vue-router'
const router = useRouter()
const isExiting = ref(false)
const videoPlayer = ref(null)
// TODO: 视频配置
const videoUrl = ref('https://cdn.ipadbiz.cn/stdj/video/sample-10s.mp4')
......@@ -62,7 +64,29 @@ const enterApp = () => {
}
onMounted(() => {
// 可以在这里添加一些初始化逻辑
const video = videoPlayer.value
if (video) {
// 尝试播放视频
const playPromise = video.play()
if (playPromise !== undefined) {
playPromise.catch(error => {
// 自动播放被阻止,在微信环境下尝试通过 WeixinJSBridge 播放
console.log('自动播放失败:', error)
const ua = navigator.userAgent.toLowerCase()
if (ua.match(/MicroMessenger/i) && typeof window.WeixinJSBridge !== 'undefined') {
window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
video.play()
})
}
})
}
// 监听微信JSBridgeReady事件
document.addEventListener('WeixinJSBridgeReady', () => {
video.play()
}, false)
}
})
</script>
......