I am reading at working with video
import React from "react"
import DogVideo from "../assets/dog.mp4"
export default function Home() {
return (
<video controls>
<source src={DogVideo} type="video/mp4" />
</video>
);
}
However I am trying something similar import background from "../../static/assets/vid/michaelpr.mp4" but I get an error
Cannot find module '../../static/assets/vid/michaelpr.mp4' or its corresponding type definition ts(2307).
What am I doing wrong? Yes, the file is there. I have a CSS file that I am importing from the static folder without any problem.
Related
Explain why I get such a url. I'm trying to pull a video from YouTube.
Error in console:
GET http://localhost:3000/www.youtube.com/watch?v=IEDEtZ4UVtI 404 (Not Found)
GET http://localhost:3000/www.youtube.com/watch?v=IEDEtZ4UVtI 404 (Not Found)
Why do I have my localhost first and then a link to the video? How can this be fixed?
index.js:
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
export default function Home() {
return (
<div className={styles.wrapper}>
<video controls>
<source src="www.youtube.com/watch?v=IEDEtZ4UVtI" type="video/mp4" />
</video>
</div>
);
}
Project folder:
Project folder
The URL you are using should start with https://... and the video is unavailable, Use another link
For example use this video https://www.youtube.com/watch?v=ScMzIvxBSi4
You should use iframe with src of https://www.youtube.com/embed/YourVideoId
currently the ID is ScMzIvxBSi4 so
<iframe width="420" height="315"
src="https://www.youtube.com/embed/IEDEtZ4UVtI">
Replace YourVideoId with the video you want
You can also see this documentation
How do you add a mp3 url to your reactjs app and let it autoPlay in loop in the background?
I installed both reactplayer and react audio player packages.
Here's my code:
import "./App.css";
import ReactAudioPlayer from "react-audio-player";
function App() {
return (
<div className="App">
<ReactAudioPlayer
src="https://www.mboxdrive.com/SolarSymphony.mp3"
autoPlay
loop
/>
</div>
);
}
export default App;
You can load an mp3 file from an audio element.
Make sure you move your music.mp3 into the /public folder.
Add an audio element inside the <body> of your index.html
<audio id="audio" loop autoplay>
<source src="%PUBLIC_URL%/music.mp3" type="audio/mpeg">
</audio>
Done!
If you want to control the audio to Play/Pause/Stop the music.
const audio: Partial<HTMLAudioElement> = document.getElementById('audio')
audio.pause()
You can call this from anywhere, remember to remove autoplay prop from the audio element if you don't want it to play when the app starts.
I am trying to display a background video on my web app after fetching it from firebase storage. The code looks something like this:
import React, { useState, useEffect } from "react";
import { storage } from "../firebase";
const videoRef = storage.ref().child('<filename>');
export default function Dashboard() {
const [videoURL, setVideoUrl] = useState('');
useEffect(() => {
videoRef.getDownloadURL().then((url) => {
setVideoUrl(url);
});
}, []);
return (
<div>
<video width="400" autoPlay muted loop>
<source src={videoURL} type="video/mp4"/>
Your Browser does not support HTML video.
</video>
</div>
);
}
The resulting page is blank, but inspecting the element via dev tools shows the video element with the correct url. In fact, if I just copy the url and hard code it as src it works just fine.
I assume there is some issue related to React not refreshing after updating the url but I haven't found a solution so far.
You need to render <video> tag when the videoURL is available.
return (
<div>
{!!videoURL && (
<video width="400" autoPlay muted loop>
<source src={videoURL} type="video/mp4"/>
Your Browser does not support HTML video.
</video>
)}
</div>
);
You should try to use a component to do that.
i found react-player very easy to use.
https://www.npmjs.com/package/react-player
example of usage:
import React from 'react'
import ReactPlayer from 'react-player'
// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
Try adding the videoRef inside the dependency array on the useEffect.
I am trying to build a site using react.js and I was able to render the picture but I am not able to view the picture. I need some help. I am creating a website for a client. I am trying to render the image from Header.jsx. The picture is saved in public/Images/Img1.jpg. I have a component folder which as App.jsx, CreateArea.jsx, Header.jsx, Footer.jsx and Navbar.jsx.
[Error with pic
import React from "react";
import NavbarHeader from "./Navbar";
function Header() {
return (
<header>
<NavbarHeader
/>
<h1>SyncTech Solutions- Take your business beyond the four walls. </h1>
<img src = "/Images/Img1.jpg"></img>
</header>
);
}
export default Header;
]1
You need to use
<img src={`${process.env.PUBLIC_URL}/Images/Img1.jpg`} />
for using images from public folder.
process.env.PUBLIC_URL will store your public url... The one which you access with %PUBLIC_URL% in the index.html file.
You could use require or import syntax if your image was inside src folder since it would be processed by webpack then.
But process.env.PUBLIC_URL seems to be the correct option in your case.
Replace your <img> tag with
<Image source={require('./Images/Img1.jpg')} />
I am using React version 16.8.6. I am trying to load some SVG images in my application, But there is a 1-second delay before the image appears in dom.
Here is how I load svg image
import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />
Please find the gif link that shows the loading delay issue.
https://ibb.co/jH35S38
PS. This happens in production only.
I had the same problem, i found the article below which says that you can use SVGs as component and because the image is not loaded as a separate file there is no delay.
It works for me.
https://blog.logrocket.com/how-to-use-svgs-in-react/
import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
export default App;