I have a Material UI Card component that I'd like to have contain a video (webm) that autoplays. (It's a mute video)
The documentation for the CardMedia component indicates to list any HTML element as the component element type -- so I have listed "video".
I have tried playing with suggestions from here: Video autoplay not working - Trying to find a fix
Specifically, I've tried added component: 'video autoPlay muted
to no avail - getting an error that the element cannot be created. I also tried passing an actual tag: <video autoPlay muted>
... also failure ('expecting string').
<Card className={classes.root} raised={true}>
<CardHeader
title={camera.cameraName}
/>
<CardActionArea>
<CardMedia
component='video'
className={classes.media}
image={"path/to/file/video.webm"}
/>
<CardContent>
<Typography variant="body2" color="textSecondary" component="p">
Some Text
</Typography>
</CardContent>
</CardActionArea>
</Card>
Any suggestions on how I can get a video to auto play in a MaterialUI CardMedia component?
Alternatively, I'd settle for simply having the controls show up by default - as is, you have to right click and select 'show controls'.
React Material UI CardMedia video component not playing led me to the idea that CardMedia appears to simply pass on properties to the 'parent' component (a tag, in this case)
As such, I was able to add an 'autoPlay' property to the CardMedia and it worked.
<CardMedia
component='video'
className={classes.media}
image={"path/to/file/video.webm"}
autoPlay
/>
Note that adding 'controls' also added controls to the video.