refactor: 优化video标签使用source子元素
技术改进: - 将video标签的src属性改为使用source子元素 - 明确指定video/mp4 MIME类型 - 添加浏览器不支持时的fallback文本 优势: - 更好的浏览器兼容性 - 支持多种视频格式的fallback - 更符合HTML5标准的最佳实践 - 便于后续扩展支持多种视频格式 代码结构: - 保持原有的事件处理和样式 - 条件渲染source元素,避免空URL - 添加用户友好的错误提示文本
This commit is contained in:
parent
12714f1c53
commit
fb8b5b90ee
|
|
@ -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 && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue