如何在材料的UI卡組件，而不是使用img標籤視頻的HTML標籤

Question

我試圖用材料的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

要在反應組件使用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 ，