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.
Related
This my code for the a components inside my Next.js 13 with ts, eslint, as well as Chakra UI.
Both images and videos is not working or showing.
I tried the HTML <img> tag as well as importing Image from Chakra. Still the same issue it's not working.
import { Flex } from "#chakra-ui/react";
import Image from 'next/image';
const Navbar:React.FC = () => {
return (
<>
<Flex bg="white" height="44px" padding="6px 12px">
<Flex>
<Image
src={"/public/images/logo.png"} alt='Apex Logo' width="350" height="300"/>
</Flex>
</Flex>
<video src={'/public/images/about video.mp4 '} controls height="100%" width="100%"></video>
</>
)
}
export default Navbar;
I think you dont have to pass /public
src={"/images/logo.png"}
next.js automatically will go inside public folder
I have one personal nextjs poject and I need to use slides like "tiktok style". To do so I tried to use the library react-responsive-carousel on vertical mode. Everything seems to be all right in dev mode, but when I try to build it, then it doesn't show me anything. It just disappears. I confirm that the problem is only with the prop axis="vertical" while with default axis="horizontal" everything seems to be all right.
Did anyone had the same issue with this library?
This is my code:
import { NextPage } from "next";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
const Body: NextPage = () => {
return (
<div>
<Carousel
emulateTouch
showArrows={false}
showStatus={false}
showIndicators={false}
showThumbs={false}
width={"100%"}
dynamicHeight
>
<Header />
<AboutMe />
<Projects />
<Footer />
</Carousel>
</div>
);
};
export default Body;
The purpose is to slide my pages vertically like reels or tiktok. I also tried the library react-slick but it has some troubles on mobile devices. It refreshes the page when I slide up.
Do you have any idea on how to fix this? Or do you have another solution?
p.s. I am not getting any error in console
Any idea how i can create a Background Video (100vh, 100vw) using cloudinary-react?
Here is my Video Component:
import { useRef } from 'react'
import { Video, CloudinaryContext, Transformation } from 'cloudinary-react'
const VideoPlayer = () => {
const videoRef = useRef()
return (
<CloudinaryContext cloud_name="joinshelf">
<div className="h-screen w-screen">
<Video publicId="luciana_e1vp7u" innerRef={videoRef}>
<Transformation
audioCodec="none"
height="480"
quality="auto"
videoCodec="auto"
width="852"
crop="fill"
/>
</Video>
</div>
</CloudinaryContext>
)
}
export default VideoPlayer
If that not possible, any idea how to render a 11MB Video fast?
Right now it just a file in the public folder and im using Vercel for hosting
Thanks for the Helpers!
I am very new to react and possibly trying to add a autoplay video in one of my components but for some reason it doesn't play if you all can possibly suggest how to do the same.
I have tried using,
export const VideoBg = () =>{
return(
)
};
export const VideoBg = () =>{
return(
Video
)
};
but nothing works please help me out
You can use React refs to control your video elements.
export default function App() {
const videoRef = React.useRef(null);
function play() {
videoRef.current.play();
}
function pause() {
videoRef.current.pause();
}
return (
<>
<video ref={videoRef}>
<source
src="https://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4"
/>
</video>
<button onClick={play}>Start</button>
<button onClick={pause}>Pause</button>
</>
);
}
In this example I'm controlling them using buttons, but you can also call these functions from anywhere. If you wanted it to play when the component renders, you'd wrap the function call in a useEffect hook.
CodeSandbox:
https://codesandbox.io/s/gracious-mccarthy-benex4
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.