如何在material-ui Card组件中使用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;

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

Answer 1

要video在您的反应组件中使用，您可以使用以下内容package

https://github.com/CookPete/react-player

以use它只是按照下面的指导，

npm install react-player --save

import React, { Component } from 'react'
import ReactPlayer from 'react-player'

class App extends Component {
  render () {
    return <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing />
  }
}

你可以documentation从他们的回购中获得，

Answer 2

上面的示例仅适用于来自您服务器的视频，否则，您将收到 CORB 错误。

对于来自另一个站点的视频，请使用：

<CardMedia 
          component="iframe"
          height="140"
          image="https://....mp4"
          title="Contemplative Reptile" />

Answer 3

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

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

用所需VIDEO_ID的实际视频 ID替换

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

Answer 4

好简单

<CardMedia 
  component="video"
  height="140"
  image="/static/images/cards/contemplative-reptile.mp4"
  title="Contemplative Reptile" 
/>