set html5 video properties in typescript

Question

Using this SO question, I put this html5 code into a typescript project to play a video automatically and to use a gif as a fallback if html5 video is not supported. However, the autoplay and loop and width and height controls create an error in typescript (see below). However, if I remove the autoplay loop width and height properties, then I can play the video by accessing the controls in the browser.

Question: How can I set the video to play and loop automatically in typescript?

<video autoplay="autoplay" loop="loop" width="400" height="300">
    <source src={mymp4} type="video/mp4" />
    <img src={fallback.gif} width="400" height="300" />
</video>

Type '{ autoplay: "autoplay"; loop: "loop"; width: "400"; height: "300"; children: Element[]; }' is not assignable to type 'DetailedHTMLProps, HTMLVideoElement>'

Tom Cumming Tom Cumming · Accepted Answer · 2017-08-09T14:32:15

<video autoPlay loop width="400" height="300">
    <source src={mymp4} type="video/mp4" />
    <img src={fallback.gif} width="400" height="300" />
</video>

Notice the case difference on autoPlay. Also these are boolean attributes so we can just use the names to set them in jsx.

set html5 video properties in typescript

2 Answers