Search code examples
javascriptreactjstypescriptvideo-streaming

React video player not playing local videos on typescript

I am using react-player to play videos the same approach that I used in normal react working fine but if I used typescript it showing an empty blank container.

The below code is of my videoplayer component

import React from 'react'
import Container from '@material-ui/core/Container'
import ReactPlayer from 'react-player/file'


type props = {
    path?:string,
    title?:string
}

const VPlayer = ({p, t} : props) => {
    return (
        <React.Fragment>
            <Container maxWidth="md">
                <h3>{t}</h3>
                <ReactPlayer 
                url={p}
                />
            </Container>
        </React.Fragment>
    )
}

export default VPlayer

The below code is App.tsx where I am using this component.

const vPath = require('../videos/sample.mp4')
const title = 'Big Bunny'

The above lines are to get the video path and the video title and the video directory is in my src folder

<React.Fragment>
            <VPlayer p={vPath} t={title}/>
        </React.Fragment>

If I console.log(p) I am getting this enter image description here

Solution

  • you are importing video using require which returns an object and your passing it as the object.

    use vPath.default in your app.tsx

    <VPlayer p={vPath.default} t={title}/>