react material-ui CardMedia 组件中的自动播放视频

Question

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

Answer 1

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.

Answer 2

此外，如果在使用 iframe 组件时对其他人有帮助，您可以在 URL 中设置allow="autoPlay"与?autoplay=1&mute结合使用，它会起作用：

<CardMedia component="iframe" src={video} allow="autoPlay"/>