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

Question

我有一个Material UI Card 组件，我希望它包含一个自动播放的视频 (webm)。（这是一个静音视频）CardMedia 组件的文档指示将任何 HTML 元素列为组件元素类型——因此我列出了“video”。我尝试使用这里的建议：Video autoplay not working - Trying to find a fix具体来说，我尝试添加component: 'video autoPlay muted无济于事 - 收到无法创建元素的错误。我还尝试传递一个实际的标签：<video autoPlay muted>...也是失败的（'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>关于如何让视频在 MaterialUI CardMedia 组件中自动播放的任何建议？或者，我会满足于让控件默认显示 - 实际上，您必须右键单击并选择“显示控件”。

Answer 1

React Material UI CardMedia 视频组件不播放让我想到 CardMedia 似乎只是将属性传递给“父”组件（在本例中为标签）

因此，我能够向 CardMedia 添加一个“自动播放”属性并且它起作用了。

        <CardMedia
            component='video'
            className={classes.media}
            image={"path/to/file/video.webm"}
            autoPlay
        />

请注意，添加“控件”也会向视频添加控件。

Answer 2

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

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