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

【问题标题】：React video player not playing local videos on typescript反应视频播放器不在打字稿上播放本地视频
【发布时间】：2021-10-27 03:30:15
【问题描述】：

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

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

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) 我得到这个

【问题讨论】：

控制台是否显示任何错误？
不，它没有显示任何错误
您确定该文件吗？你能把它加载到一个简单的基本 html 视频标签中吗？
看到我在 console.log(p) 时在控制台的问题中添加了截图

标签： javascript reactjs typescript video-streaming

【解决方案1】：

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

在你的 app.tsx 中使用 vPath.default

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

【讨论】：