1// VideoPlayer.tsx
2import React from 'react';
3import './VideoPlayer.css';
4
5interface VideoPlayerProps {
6  videoUrl: string;
7}
8
9const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUrl }) => {
10  const baseUrl = 'http://www.capture-agent.com'; // 替换为你的域名或本地地址
11  const fullUrl = `${baseUrl}${videoUrl}`;
12
13  return (
14    <div className="video-container">
15      <video controls className="video-player">
16        <source src={fullUrl} type="video/mp4" />
17        您的浏览器不支持视频播放。
18      </video>
19    </div>
20  );
21};
22
23// 示例用法
24const App: React.FC = () => {
25  const videoUrl = '/api/media/file/PixPin_2025-03-11_02-35-06.mp4';
26  return <VideoPlayer videoUrl={videoUrl} />;
27};
28
29export default App;
Copy