|
|
@@ -1,7 +1,7 @@
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
import videojs from 'video.js';
|
|
|
-import { setStorage, STORAGE_KEYS, markRouteVisited } from '@/utils/storage';
|
|
|
+import { setStorage, STORAGE_KEYS } from '@/utils/storage';
|
|
|
import 'video.js/dist/video-js.css';
|
|
|
import './VideoIntroPage.css';
|
|
|
import chatbotBg from '@/assets/chatbot-bg.svg';
|
|
|
@@ -91,7 +91,7 @@ export const VideoIntroPage = () => {
|
|
|
let hasStartedPlaying = false;
|
|
|
|
|
|
// 确保视频元素可见
|
|
|
- const playerEl = this.el();
|
|
|
+ const playerEl = this.el() as HTMLElement | null;
|
|
|
if (playerEl) {
|
|
|
playerEl.style.visibility = 'visible';
|
|
|
playerEl.style.opacity = '1';
|
|
|
@@ -278,30 +278,37 @@ export const VideoIntroPage = () => {
|
|
|
videoElement.load();
|
|
|
|
|
|
// 监听 canplay 事件后再播放
|
|
|
+ const safeVideoElement: HTMLVideoElement = videoElement;
|
|
|
const canplayHandler = () => {
|
|
|
console.log('[VideoIntroPage] canplay 事件触发,开始播放');
|
|
|
- videoElement.removeEventListener('canplay', canplayHandler);
|
|
|
- this.play().catch((error) => {
|
|
|
- console.error('[VideoIntroPage] ❌ 播放失败:', error);
|
|
|
- });
|
|
|
+ safeVideoElement.removeEventListener('canplay', canplayHandler);
|
|
|
+ const playResult = this.play();
|
|
|
+ if (playResult) {
|
|
|
+ playResult.catch((error: unknown) => {
|
|
|
+ console.error('[VideoIntroPage] ❌ 播放失败:', error);
|
|
|
+ });
|
|
|
+ }
|
|
|
};
|
|
|
- videoElement.addEventListener('canplay', canplayHandler);
|
|
|
+ safeVideoElement.addEventListener('canplay', canplayHandler);
|
|
|
|
|
|
// 超时保护:如果 3 秒后还没 canplay,尝试直接播放
|
|
|
setTimeout(() => {
|
|
|
- videoElement.removeEventListener('canplay', canplayHandler);
|
|
|
- if (videoElement.paused) {
|
|
|
+ safeVideoElement.removeEventListener('canplay', canplayHandler);
|
|
|
+ if (safeVideoElement.paused) {
|
|
|
console.log('[VideoIntroPage] ⏰ 超时,尝试直接播放');
|
|
|
- this.play().catch((error) => {
|
|
|
- console.error('[VideoIntroPage] ❌ 超时后播放失败:', error);
|
|
|
- });
|
|
|
+ const playResult = this.play();
|
|
|
+ if (playResult) {
|
|
|
+ playResult.catch((error: unknown) => {
|
|
|
+ console.error('[VideoIntroPage] ❌ 超时后播放失败:', error);
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
}, 3000);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
- this.on('error', (error) => {
|
|
|
+ this.on('error', (error: unknown) => {
|
|
|
// 视频加载/播放错误,输出调试信息
|
|
|
const videoElement = this.el().querySelector('video') as HTMLVideoElement;
|
|
|
const errorInfo = videoElement ? {
|
|
|
@@ -443,6 +450,9 @@ export const VideoIntroPage = () => {
|
|
|
if (!isLoading && playerRef.current) {
|
|
|
console.log('[VideoIntroPage] 加载完成,触发播放');
|
|
|
const player = playerRef.current;
|
|
|
+ if (!player) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
const videoElement = player.el().querySelector('video') as HTMLVideoElement;
|
|
|
|
|
|
if (videoElement) {
|
|
|
@@ -452,14 +462,21 @@ export const VideoIntroPage = () => {
|
|
|
videoElement.volume = 1.0;
|
|
|
|
|
|
// 尝试播放
|
|
|
- player.play().catch((error) => {
|
|
|
- console.warn('[VideoIntroPage] 自动播放失败,尝试静音播放:', error);
|
|
|
- // 如果失败,尝试静音播放
|
|
|
- player.muted(true);
|
|
|
- player.play().catch((err) => {
|
|
|
- console.error('[VideoIntroPage] 静音播放也失败:', err);
|
|
|
- });
|
|
|
- });
|
|
|
+ const playPromise = player.play();
|
|
|
+ if (playPromise) {
|
|
|
+ playPromise
|
|
|
+ .catch((error: unknown) => {
|
|
|
+ console.warn('[VideoIntroPage] 自动播放失败,尝试静音播放:', error);
|
|
|
+ // 如果失败,尝试静音播放
|
|
|
+ player.muted(true);
|
|
|
+ const mutedPlayPromise = player.play();
|
|
|
+ if (mutedPlayPromise) {
|
|
|
+ mutedPlayPromise.catch((err: unknown) => {
|
|
|
+ console.error('[VideoIntroPage] 静音播放也失败:', err);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}, [isLoading]);
|