在React Material-UI CardMedia组件中自动播放视频

编程问答 2022-06-20

问题描述

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

CardMedia component的文档指示要列出任何HTML元素作为组件元素类型-因此，我列出了“视频”。

我尝试了以下建议：Video autoplay not working - Trying to find a fix

具体来说，我尝试添加component: 'video autoplay muted无济于事-收到无法创建元素的错误。我还尝试传递一个实际标签：<video autoplay muted> ...也失败了（“期望字符串”）。

<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组件中自动播放视频的任何建议？

或者，我只希望默认情况下显示控件-就这样，您必须右键单击并选择“显示控件”。

解决方法

React Material UI CardMedia video component not playing使我想到CardMedia似乎只是将属性传递给“父级”组件（在这种情况下为标签）

这样，我能够向CardMedia添加一个'autoPlay'属性，并且该属性可以正常工作。

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

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

,

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

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