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.
Related
How to play live camera view in ReactJS using RTSP. I have RTSP URL to play IP camera's video live how can we play
import React from "react";
import RTSPPlayer from "react-rtsp-player";
const CameraView =()=>{
return (
<RTSPPlayer
url="rtsp://<camera-ip-address>:<port>/<stream>"
controls={true}
/>
);
}
export default CameraView;
Please help me, i don't have web dev experience, and i work in my friend project. I follow a tutorial from youtube about tailwind and react. In the video, he can fill his whole screen using this code:
So i try it in my Dashboard function:
import React from "react";
function Dashboard(props) {
return (
<div>
<main>
<section className=" bg-slate-700 min-h-screen">
hello
</section>
</main>
</div>
);
}
export default Dashboard;
but i get:
This is my project structure looks like:
Why can't i get the same result as the tutorial?
Its because you are using inside a tag which has not to much content in it If you want to apply the color on the full screen you have to use the class "w-screen and min-h-screen" by which that tag gets the full width of the screen and full height
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
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 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;