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
|
<video
|
||||||
ref={videoRef}
|
ref={videoRef}
|
||||||
src={videoUrl}
|
|
||||||
className="w-full h-full object-contain"
|
className="w-full h-full object-contain"
|
||||||
onLoadedData={handleVideoLoad}
|
onLoadedData={handleVideoLoad}
|
||||||
onError={handleVideoError}
|
onError={handleVideoError}
|
||||||
|
|
@ -244,7 +243,12 @@ export const VideoPreviewModal: React.FC<VideoPreviewModalProps> = ({
|
||||||
onPlay={handlePlay}
|
onPlay={handlePlay}
|
||||||
onPause={handlePause}
|
onPause={handlePause}
|
||||||
controls={false}
|
controls={false}
|
||||||
/>
|
>
|
||||||
|
{videoUrl && (
|
||||||
|
<source src={videoUrl} type="video/mp4" />
|
||||||
|
)}
|
||||||
|
您的浏览器不支持视频播放。
|
||||||
|
</video>
|
||||||
|
|
||||||
{/* 右上角悬浮按钮组 */}
|
{/* 右上角悬浮按钮组 */}
|
||||||
{!isLoading && !error && (
|
{!isLoading && !error && (
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue