refactor: 优化video标签使用source子元素

技术改进:
- 将video标签的src属性改为使用source子元素
- 明确指定video/mp4 MIME类型
- 添加浏览器不支持时的fallback文本

优势:
- 更好的浏览器兼容性
- 支持多种视频格式的fallback
- 更符合HTML5标准的最佳实践
- 便于后续扩展支持多种视频格式

代码结构:
- 保持原有的事件处理和样式
- 条件渲染source元素,避免空URL
- 添加用户友好的错误提示文本
This commit is contained in:
imeepos 2025-07-31 13:44:36 +08:00
parent 12714f1c53
commit fb8b5b90ee
1 changed files with 6 additions and 2 deletions

View File

@ -236,7 +236,6 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
<video
ref={videoRef}
src={videoUrl}
className="w-full h-full object-contain"
onLoadedData={handleVideoLoad}
onError={handleVideoError}
@ -244,7 +243,12 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
onPlay={handlePlay}
onPause={handlePause}
controls={false}
/>
>
{videoUrl && (
<source src={videoUrl} type="video/mp4" />
)}
</video>
{/* 右上角悬浮按钮组 */}
{!isLoading && !error && (