CODEWITHSUNDEEP
reactjsvideoonclickuse-ref
Babilon
Babilon

Reputation: 31

Video not displaying on tiktok clone

I'm trying to display and play the video but nothing shows up on the screen, is there anything wrong with my function or my codes? Can anybody help me? Thank you so much!

    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;

This is my 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;

This is my directory: enter image description here

Upvotes: 0

Views: 494

Answers (2)

Anil Singha
Anil Singha

Reputation: 428

Try this

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

instead of doing this

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

It will work.

Upvotes: 1

92yo
92yo

Reputation: 568

If you've created your project via create-react-app, then you will want to create a Videos folder under the public directory, and put your video files there. not in the src folder.

So put your video file in TIKTOK-clone/public/Videos/video1.mp4. Then clear your browser cache, rebuild, and reload app.

NOTE: make sure you import video files as such:

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

Upvotes: 0

Related Questions