material-ui卡片组件中如何使用Video html标签代替img标签

Question

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

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' 标签在卡片中显示图像。但我正在使用 'video' 标签，如上所述。其他元素正在我的页面中呈现，但视频未显示在页面中？我错过了什么吗？或者在 material-ui?

中有不同的视频标签使用方式

Answer 1

要在你的 React 组件中使用 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

非常简单

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

Answer 3

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

对于来自其他站点的视频，请使用：

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

Answer 4

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

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

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

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

Answer 5

如果您将自动播放和静音设置为空字符串，它似乎可以解决问题

        <Card className={classes.root}>
                <CardMedia
                    component='video'
                    alt='video'
                    image='/images/video.mp4'
                    title='video'
                    type='video/mp4'
                    muted=''
                    autoPlay=''
                />
            </Card>

注意。认为您也需要使用驼峰式大小写自动播放

material-ui卡片组件中如何使用Video html标签代替img标签

How to use Video html tag instead of img tag in material-ui Card Component

reactjs

react-jsx

material-ui