Sijan Bhandari Sijan Bhandari - 3 months ago 25
React JSX Question

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

I am trying to embed a video to my page using Material-ui Card component as follows:

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;


The example in the documentation is using 'img' tag to display image in the card. But I am using 'video' tag as above. Other elements are rendering in my page but, the video is not displaying in the page? Am I missing something? Or there is different way of using video tags in material-ui?

Answer

To use video in your react component you can use the below package

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

to use it just follow the below guide,

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 />
  }
}

you can get the documentation from their repo,

Comments