视频不显示在 tiktok 克隆上

Posted 2023-02-25

【中文标题】视频不显示在 tiktok 克隆上

【英文标题】：Video not displaying on tiktok clone

【发布时间】：2021-09-28 09:22:32

【问题描述】：

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

    import React,  useRef  from "react";
    import "./Video.css";
    
    function Video() 
      const videoRef = useRef(null);
    
      const onVideoPress = () => 
        videoRef.current.play();
      ;
      return (
        <div className="video">
          <video   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;

这是我的目录： enter image description here

【问题讨论】：

请分享您的目录结构

我刚刚在我的帖子中添加了目录图片。请检查！

【参考方案1】：

如果您是通过create-react-app 创建项目的，那么您需要在公共目录下创建一个Videos 文件夹，并将您的视频文件放在那里。 不在src 文件夹中。

所以把你的视频文件放在TIKTOK-clone/public/Videos/video1.mp4。然后清除浏览器缓存、重建并重新加载应用程序。

注意：确保您导入视频文件：

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

【参考方案2】：

试试这个

 import Video from './video.mp4';
....
  <video   onClick=onVideoPress ref=videoRef controls>
     <source src=Video type="video/mp4" />
 </video>

而不是这样做

<video   onClick=onVideoPress ref=videoRef>
     <source src="./video.mp4" type="video/mp4" />
 </video>

它会起作用的。