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

Question

我有一个 Material UI Card component，我希望它包含一个自动播放的视频 (webm)。（这是一个静音视频）

CardMedia component 的文档指示将任何 HTML 元素列为组件元素类型——所以我列出了“视频”。

我试过使用这里的建议：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 组件中自动播放有什么建议吗？

或者，我只想让控件默认显示 - 实际上，您必须右键单击并 select 'show controls'.

Answer 1

React Material UI CardMedia video component not playing 让我想到 CardMedia 似乎只是将属性传递给 'parent' 组件（在本例中为标记）

因此，我能够将 'autoPlay' 属性添加到 CardMedia 并且它起作用了。

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

请注意，添加 'controls' 也会向视频添加控件。

Answer 2

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

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

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

Autoplay video in react material-ui CardMedia component

javascript

reactjs

material-ui

webm