fix
This commit is contained in:
parent
44a669b6fc
commit
38a113097b
|
|
@ -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)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue