反应视频播放器不在打字稿上播放本地视频

Question

我正在使用 react-player 播放视频，与我在正常反应中使用的相同方法工作正常，但如果我使用打字稿，它会显示一个空的空白容器。

下面的代码是我的视频播放器组件

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

下面的代码是 App.tsx 我使用这个组件的地方。

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

以上几行是获取视频路径和视频标题，视频目录在我的src文件夹中

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

如果我 console.log(p) 我得到这个

Answer 1

您正在使用 require 导入视频，其中 returns 一个对象并将其作为对象传递。

在 app.tsx

中使用 vPath.default

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

反应视频播放器不在打字稿上播放本地视频

React video player not playing local videos on typescript

javascript

video-streaming

typescript

reactjs