在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 添加一个“自动播放”属性并且它起作用了。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<CardMedia &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;component='video' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;className={classes.media} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image={"path/to/file/video.webm"} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autoPlay &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/>请注意，添加“控件”也会向视频添加控件。

Answer 2

此外，如果在使用 iframe 组件时对其他人有帮助，您可以在 URL 中设置allow="autoPlay"combined with ，它将起作用：?autoplay=1&mute<CardMedia&nbsp;component="iframe"&nbsp;src={video}&nbsp;allow="autoPlay"/>