import React from 'react';
import { useParams } from 'react-router-dom';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';

const config = {
  Host: 'http://192.168.31.121:4444',
};

const VideoPlayer = () => {
  const { filename } = useParams();

  return (
    <Container>
      <Typography variant="h6" gutterBottom>
        {filename}
      </Typography>
      <video
        controls
        style={{ width: '100%', maxHeight: '70vh' }}
        src={`${config.Host}/res/${filename}`}
      >
        您的浏览器不支持HTML5视频播放。
      </video>
    </Container>
  );
};

export default VideoPlayer;