reactjsfile-structure
Unable to access video files in ReactJS: No errors are visible in the console
I am trying to access videos in ReactJS but I do not know why it is constantly not accepting them, the console neither shows errors.
I have tried ../assests/videos/video-2.mp4 and other variants still I am not able to see the video on display and neither the console shows an error
Following is the code and file structure of my project:
Please help me out.
Thanks in advance.
Solution
You need to move videos inside the public folder
Example: Your file-structure will be like
public/assets/videos/video-1.mp4
public/assets/videos/video-2.mp4
Then your path /assets/videos/video-1.mp4 will be working
- Error: Absolute route path "/" nested under path "/app" is not valid
- How to send a property from an array of object from a child component to the parent component?
- Create react app, reload not working
- Building a UI lib with Storybook
- React Native Modal Transparent Not Working
- How do I recognize swipe events in React?
- Sequentially Numbering Footnotes with React
- What is the proper way to do global state?
- Is there a way to tell if ReactElement renders "null"?
- Strange MUI Grid behavior when using spacing
- serve -s build specify port number
- Autocomplete MUI is warning that I need a key for each child passed
- react-i18next:: You will need to pass in an i18next instance by using initReactI18next
- React start async submit process only once
- How to use Hls.js with React properly?
- Background image in tailwindcss using dynamic url (React.js)
- "Next.js App Requires Node.js Version >= v18.17.0, but Encountering Error with Node.js 16.20.2 - How to Resolve?"
- docusaurus won't pick up my translated markdown files
- Using Matter.js to render to the DOM or React
- React won't draw anything in the canvas in useEffect
- How to change scrollbar when using Tailwind (next.js/react)
- On refreshing my react application, useEffect hook is not working while using react-paginate library
- How to deploy a react app in production over https?
- Why React Hook useState uses const and not let
- How can I suppress React imports in TypeScript output to allow CDN references?
- Getting this openai typescript error (Type 'MessageInterface' is not assignable to type 'ChatCompletionMessageParam')
- package.json reference value from external json
- How to correctly mark component as server with React 19 beta
- useMutation does not fire rerender React
- Allow complete rotation of model in Three with React