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 [videoSrc, setVideoSrc] = useState<string>('')
const [fileExists, setFileExists] = useState<boolean>(true) const [fileExists, setFileExists] = useState<boolean>(true)
const [errorMessage, setErrorMessage] = useState<string>('') const [errorMessage, setErrorMessage] = useState<string>('')
const [loadingMethod, setLoadingMethod] = useState<'convertFileSrc' | 'dataUrl'>('convertFileSrc')
useEffect(() => { useEffect(() => {
const checkFileAndSetSrc = async () => { const checkFileAndSetSrc = async () => {
@ -45,12 +46,23 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
console.log('Video path conversion:', { console.log('Video path conversion:', {
originalPath: videoPath, originalPath: videoPath,
convertedSrc: src, 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) setFileExists(true)
setErrorMessage('') setErrorMessage('')
setVideoSrc(src) setVideoSrc(src)
setLoadingMethod('convertFileSrc')
} catch (error) { } catch (error) {
console.error('Error checking file:', error) console.error('Error checking file:', error)
setFileExists(false) setFileExists(false)
@ -62,6 +74,23 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
checkFileAndSetSrc() checkFileAndSetSrc()
}, [isOpen, videoPath]) }, [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(() => { useEffect(() => {
const video = videoRef.current const video = videoRef.current
if (!video) return if (!video) return
@ -182,7 +211,16 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
<AlertCircle size={64} className="mx-auto mb-4 text-red-400" /> <AlertCircle size={64} className="mx-auto mb-4 text-red-400" />
<h3 className="text-xl font-medium mb-2"></h3> <h3 className="text-xl font-medium mb-2"></h3>
<p className="text-gray-300 mb-4">{errorMessage}</p> <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>
</div> </div>
) : ( ) : (
@ -191,16 +229,24 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
src={videoSrc} src={videoSrc}
className="w-full h-auto max-h-[70vh]" className="w-full h-auto max-h-[70vh]"
onClick={handlePlayPause} onClick={handlePlayPause}
onError={(e) => { onError={async (e) => {
console.error('Video loading error:', { console.error('Video loading error:', {
error: e, error: e,
videoSrc, videoSrc,
originalPath: videoPath, originalPath: videoPath,
currentTarget: e.currentTarget, currentTarget: e.currentTarget,
networkState: e.currentTarget.networkState, networkState: e.currentTarget.networkState,
readyState: e.currentTarget.readyState readyState: e.currentTarget.readyState,
currentMethod: loadingMethod
}) })
setErrorMessage('视频加载失败,请检查文件格式和路径')
// 如果当前使用的是convertFileSrc方法尝试备用的data URL方法
if (loadingMethod === 'convertFileSrc') {
console.log('convertFileSrc failed, trying data URL method...')
await tryDataUrlMethod()
} else {
setErrorMessage('视频加载失败,请检查文件格式和路径')
}
}} }}
onLoadStart={() => { onLoadStart={() => {
console.log('Video load started:', videoSrc) console.log('Video load started:', videoSrc)