reactjs - 如何在material-ui卡片组件中使用Video html标签而不是img标签

Question

我正在尝试使用 Material-ui Card 组件将视频嵌入到我的页面，如下所示:

const CardExampleWithAvatar = () => (
  <Card>

    <CardMedia
      overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}
    >
       <video>
  <source src="https://www.youtube.com/watch?v=abcdef" type="video/mp4"/>
    </video> 
    </CardMedia>
    <CardTitle title="Card title" subtitle="Card subtitle" />
    <CardText>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
      Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
      Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
    </CardText>
    <CardActions>
      <FlatButton label="Action1" />
      <FlatButton label="Action2" />
    </CardActions>
  </Card>
);

export default CardExampleWithAvatar;

documentation中的示例正在使用“img”标签来显示卡中的图像。但我使用的是上面的“视频”标签。其他元素正在我的页面中呈现，但视频未在页面中显示？我错过了什么吗？或者在material-ui中使用视频标签有不同的方式？

Answer 1

我最近发现了这个，专门为 YOUTUBE 准备的

<CardMedia
    component='iframe'
    title='test'
    src='https://www.youtube.com/embed/VIDEO_ID'
    />

将 VIDEO_ID 替换为所需的实际视频 ID

目前使用的Material UI核心版本是 - 4.9.5

注意 - 如果您发现这对其他最新版本有帮助 - 请注释掉，我可以通过这种方式更新答案