如何解决尝试加载视频文件以做出反应时出现黑色视频屏幕?
我正在尝试使用 react-player 将本地视频加载到 react 中以播放视频。我有基本的代码设置,但我不确定为什么视频没有播放。
我看到一些关于视频需要放在公共文件夹中的讨论,但这真的有必要吗?这是 codesandbox,下面是实际代码:
import React,{ useState } from "react";
import ReactPlayer from "react-player";
import classes from "./app.module.css";
function App() {
const [videoFilePath,setVideoFileURL] = useState(null);
return (
<div>
<div>
<button onClick={() => setVideoFileURL("./assets/beyondTheSea.mp4")}>
Play
</button>
</div>
{/**VIDEO 1 */}
<div>
{videoFilePath ? (
<ReactPlayer
url={videoFilePath}
width="50%"
height="50%"
controls={true}
/>
) : (
<div></div>
)}
</div>
</div>
);
}
export default App;
解决方法
看来视频确实需要在 public
文件夹中作为
setVideoFileURL("beyondTheSea.mp4")
确实有效,当 beyondTheSea.mp4
是您的 public
文件夹中的文件时。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。