typeScript +react 中使用video标签不能使用video自带的play方法和pause方法

import * as React from 'react';
import classnames from 'classnames';
import './style.scss'
export interface VideoBarProps {
    className?: string;
    style?: React.CSSProperties;
}

class Video extends React.PureComponent<VideoBarProps> {
    static defaultProps = {
        style: {},
        value: '',
        theme: 'gray',
        readOnly: false,
    };
    // video = useRef<HTMLButtonElement>(null);
    constructor(props: VideoBarProps) {
        super(props);
    }


    playVideo = () => {
//告诉ts这是个html的video标签,不然他就会告诉你这个video对象上面没有play这个东西
        let video = this.refs.video as HTMLVideoElement
        if(video.paused){
//如果添加了还是提示没有play这个方法,可以使用video. 看他的提示里面的那个play,再不行关一下代码编辑器.应该就可以了
            video.play()
        }else{
            video.pause() 
        }
       
    }
    render() {
        const { className, style } = this.props;
        return (
            <div className={classnames('video', className)} style={style} >
                <video ref={'video'} id="myVideo" src={'https://www.w3school.com.cn/i/movie.mp4'} autoPlay onClick={this.playVideo} loop style={{ width: '100%', height: '100%', objectFit: 'fill', zIndex: 1 }} >
                </video>
                <div onClick={() => console.log('xxxxx')} style={{ position: 'absolute', bottom: 0, right: 0, backgroundColor: 'yellow', width: '100px', height: '100px' }}>
                </div>
            </div>
        );
    }
}

export default Video;

出现这个问题的主要原因是ts默认你是个html中的元素,而video和一般的html不同,你得告诉它这是html中的video标签,随后你才可以使用play() pause()