This commit is contained in:
root 2025-07-11 11:44:52 +08:00
parent 44a669b6fc
commit 38a113097b
1 changed files with 51 additions and 5 deletions

View File

@ -25,6 +25,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
const [videoSrc, setVideoSrc] = useState<string>('')
const [fileExists, setFileExists] = useState<boolean>(true)
const [errorMessage, setErrorMessage] = useState<string>('')
const [loadingMethod, setLoadingMethod] = useState<'convertFileSrc' | 'dataUrl'>('convertFileSrc')
useEffect(() => {
const checkFileAndSetSrc = async () => {
@ -45,12 +46,23 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
console.log('Video path conversion:', {
originalPath: videoPath,
convertedSrc: src,
fileExists: exists
fileExists: exists,
pathType: videoPath.includes('\\') ? 'Windows' : 'Unix',
pathLength: videoPath.length
})
// 获取文件详细信息
try {
const fileInfo = await invoke('get_file_info', { filePath: videoPath })
console.log('File info:', fileInfo)
} catch (infoError) {
console.warn('Could not get file info:', infoError)
}
setFileExists(true)
setErrorMessage('')
setVideoSrc(src)
setLoadingMethod('convertFileSrc')
} catch (error) {
console.error('Error checking file:', error)
setFileExists(false)
@ -62,6 +74,23 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
checkFileAndSetSrc()
}, [isOpen, videoPath])
// 备用加载方法使用data URL
const tryDataUrlMethod = async () => {
if (!videoPath) return
try {
console.log('Trying data URL method for:', videoPath)
const dataUrl = await invoke<string>('read_video_as_data_url', { filePath: videoPath })
console.log('Data URL method successful, length:', dataUrl.length)
setVideoSrc(dataUrl)
setLoadingMethod('dataUrl')
setErrorMessage('')
} catch (error) {
console.error('Data URL method failed:', error)
setErrorMessage(`所有加载方法都失败了: ${error}`)
}
}
useEffect(() => {
const video = videoRef.current
if (!video) return
@ -182,7 +211,16 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
<AlertCircle size={64} className="mx-auto mb-4 text-red-400" />
<h3 className="text-xl font-medium mb-2"></h3>
<p className="text-gray-300 mb-4">{errorMessage}</p>
<p className="text-sm text-gray-400">: {videoPath}</p>
<p className="text-sm text-gray-400 mb-4">: {videoPath}</p>
<p className="text-xs text-gray-500 mb-4">: {loadingMethod}</p>
{loadingMethod === 'convertFileSrc' && (
<button
onClick={tryDataUrlMethod}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
</button>
)}
</div>
</div>
) : (
@ -191,16 +229,24 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
src={videoSrc}
className="w-full h-auto max-h-[70vh]"
onClick={handlePlayPause}
onError={(e) => {
onError={async (e) => {
console.error('Video loading error:', {
error: e,
videoSrc,
originalPath: videoPath,
currentTarget: e.currentTarget,
networkState: e.currentTarget.networkState,
readyState: e.currentTarget.readyState
readyState: e.currentTarget.readyState,
currentMethod: loadingMethod
})
// 如果当前使用的是convertFileSrc方法尝试备用的data URL方法
if (loadingMethod === 'convertFileSrc') {
console.log('convertFileSrc failed, trying data URL method...')
await tryDataUrlMethod()
} else {
setErrorMessage('视频加载失败,请检查文件格式和路径')
}
}}
onLoadStart={() => {
console.log('Video load started:', videoSrc)