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中的示例正在使用＆＃39; img＆＃39;标记以显示卡中的图像。但我正在使用＆＃39;视频＆＃39;标记如上。其他元素在我的页面中呈现但是，视频没有显示在页面中？我错过了什么吗？或者在材料中使用视频标签有不同的方法吗？

Answer 1

我最近特别是为YOUTUBE找到了这个

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

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

此刻正在使用的材料UI核心版本为-> 4.9.5

Answer 2

要在反应组件中使用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 3

非常简单

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

Answer 4

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

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

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

Answer 5

如果您设置自动播放并将其静音为一个空字符串，则似乎可以解决问题

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

nb。认为您还需要保护自动播放功能

如何在material-ui Card Component中使用Video html标签而不是img标签

5 个答案: