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>'

score 7 · Accepted Answer · answered Aug 09 '17 at 14:32

7

<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.

answered Aug 09 '17 at 14:32

Tom Cumming

1,078
7
9

ok, I'll try that. was it only the `{ }` brackets that indicated I was using jsx? – Leahcim Aug 09 '17 at 20:05
1

@Leahcim that and the fact you asked about typescript, it's the only way i know of to embed html – Tom Cumming Aug 10 '17 at 09:48

score 1 · Answer 2 · answered Aug 09 '17 at 14:33

1

i guess that the width and height are on READ ONLY u can't change them

also check this link :

https://developer.mozilla.org/fr/docs/Web/API/HTMLVideoElement

answered Aug 09 '17 at 14:33

Malek Zarkouna

943
10
21

set html5 video properties in typescript

2 Answers2