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.
Related
I'm writing an educational website using react.js
As a part of my website, I need to play a video. In this regard I use the ReactPlayer package. The codes are as follows:
import React from 'react'
import ReactPlayer from 'react-player'
function VideoPlayer({ url }) {
console.log(url)
return (
<div>
<ReactPlayer url={url} controls={true} width={'100%'} style={{ maxWidth: '1000px' }} />
</div>
)
}
export default VideoPlayer
The player buffers the video (referenced by URL), but the video is not seekable. It seems that the player buffers the file, but I'm not able to forward the video (my video files are all Mp4). Am I doing anything wrong? please help me to solve the problem.
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!
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
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 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.