视频不显示在抖音克隆上

Question

我尝试显示和播放视频，但屏幕上没有任何显示，我的功能或代码有问题吗？有谁能够帮助我？非常感谢！

    import React, { useRef } from "react";
    import "./Video.css";
    
    function Video() {
      const videoRef = useRef(null);
    
      const onVideoPress = () => {
        videoRef.current.play();
      };
      return (
        <div className="video">
          <video height="500px" width="300px" onClick={onVideoPress} ref={videoRef}>
            <source src="./video.mp4" type="video/mp4" />
          </video>{" "}
        </div>
      );
    }
    
    export default Video;

这是我的App.js：

    import React from "react";
    import Video from "./Video";
    import "./App.css";
    
    function App() {
      return (
        <>
          hello code{" "}
          <div className="app">
            <div className="app-videos">
              <Video />
              <Video />
              <Video />
              <Video />
            </div>{" "}
          </div>{" "}
        </>
      );
    }
    
    export default App;

这是我的目录：

Answer 1

试试这个

 import Video from './video.mp4';
....
  <video height="500px" width="300px" onClick={onVideoPress} ref={videoRef} controls>
     <source src={Video} type="video/mp4" />
 </video>

而不是这样做

<video height="500px" width="300px" onClick={onVideoPress} ref={videoRef}>
     <source src="./video.mp4" type="video/mp4" />
 </video>

它会起作用的。

Answer 2

如果您通过

create-react-app

创建了项目，那么您需要在 public 目录下创建一个

Videos

文件夹，并将视频文件放在那里。 不在

src

文件夹中。

所以将您的视频文件放入

TIKTOK-clone/public/Videos/video1.mp4

。然后清除浏览器缓存，重建并重新加载应用程序。

注意：确保导入视频文件如下：

<source src="/Videos/video.mp4" type="video/mp4"/>

Answer 3

您可以联系 Omninos 获取 Tiktok Clone Reactjs 很棒的版本。你可以在这里查看谁的一瞥..

https://www.omninos.in/tiktok-dubsmash-app-script-clone-development.phpReactjs 中的 Omninos 的 TikTok 克隆脚本