How can I define the type for a video reference in React using Typescript

0 votes

I'm trying to control the play/pause state of a video using ref's in React.js, my code works but there are tslint errors I am trying to work through:

function App() {
    const playVideo = (event:any) => {
        video.current.play()
    }
    const video = useRef(null)

    return (
        <div className="App">
            <video ref={video1} loop src={bike}/>
        </div>
    );
}

This will cause

TS2531: Object is possibly 'null'.

So I try to change const video = useRef(null) to const video = useRef(new HTMLVideoElement())

and I get: TypeError: Illegal constructor

I have also tried: const video = useRef(HTMLVideoElement) which results in:

TS2339: Property 'play' does not exist on type '{ new (): HTMLVideoElement; prototype: HTMLVideoElement; }'
Aug 3, 2022 in TypeSript by Elton
• 400 points

edited Mar 4 6 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP