import {React, useContext} from 'react';
import { useParams } from 'react-router-dom';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import ConfigContext from '../Config';



const VideoPlayer = () => {
  const config = useContext(ConfigContext);
  const { filename } = useParams();

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

export default VideoPlayer;