- 新增 /video/:id 路由与 VideoPage 组件
- 视频文件通过 /uploads/videos/{id}.mp4 静态访问
- .gitignore 排除 videos 目录,避免大文件入库
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
23 lines
563 B
TypeScript
23 lines
563 B
TypeScript
import { useParams } from "react-router-dom";
|
|
|
|
export default function VideoPage() {
|
|
const { id } = useParams();
|
|
const src = id ? `/uploads/videos/${id}.mp4` : "";
|
|
|
|
return (
|
|
<div className="min-h-svh flex items-center justify-center bg-black px-4 py-4">
|
|
{id ? (
|
|
<video
|
|
src={src}
|
|
controls
|
|
playsInline
|
|
preload="metadata"
|
|
className="block w-full max-w-[960px] h-auto bg-black"
|
|
/>
|
|
) : (
|
|
<p className="text-white/60 text-sm">视频不存在</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|