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()
