I'm using react-on-screen and Animate.css to create slideInUp animation on scroll. But I want to the animation to show up when the page is loaded and the scroll-down happened. Now in my code, the animation happens every time I scroll up and down. How do I prevent that? Additional to that, if there is any way to do it without using Animate.css or react-on-screen I would love to learn it.
Here is the code that I track scrolling and Animate.css:
<>
<div className={`container mb-5 `}>
<h1 className='text-center my-5 blue-text'>SOME HEADER</h1>
<TrackVisibility partialVisibility>
{({ isVisible }) =>
<div className={`row animated-row my-element ${isVisible ? "animate__animated animate__slideInUp animate__repeat-1 my-element" :""}`} >
<Card />
<Card />
<Card />
<Card />
</div>
}
</TrackVisibility>
</div>
</>
I saw the "Usage with Javascript" codes on the Animate.css main page but I couldn't apply them to my React code.
Thanks.
I'm trying to have a full page video background in the homepage of my Nextjs application but am just getting blank white space where the content should be.
I'm fairly new to Nextjs and am probably making a silly mistake here, if anyone could point this out I'd really appreciate the help.
My mp4 video is stored within public/assets as so here:
This is my index.js file:
import Head from 'next/head';
import Image from 'next/image';
import React, { useRef, useEffect, useState } from 'react';
import ScrollAnimation from '../components/ScrollAnimation';
import Footer from '../components/Footer';
import Header from '../components/Header';
export default function Home() {
return (
<div>
<Head>
<title>Greystone</title>
<link rel='icon' href='/favicon.ico' />
<link
rel='preload'
href='/fonts/FairplayDisplay/FairplayDisplay-Bold.ttf'
as='font'
crossOrigin=''
/>
<link
rel='preload'
href='/fonts/FairplayDisplay/FairplayDisplay-Regular.ttf'
as='font'
crossOrigin=''
/>
</Head>
<main className='overflow-y-hidden h-screen'>
<Header />
<div
id='main'
className='transition duration-1000 relative ease-in-out'
onWheel={scrollTo}>
{/* Page 1 */}
<div className='h-screen w-full flex items-center'>
<video autoplay loop muted className='w-full h-screen z-10'>
<source
src='../public/assets/bubble-video.mp4'
type='video/mp4'
/>
</video>
<div className='flex flex-col absolute right-20'>
<ScrollAnimation />
</div>
<div className='w-2/5 text-left flex flex-col text-white left-20 absolute'>
<h2 className='text-5xl'>We’re Greystone.</h2>
<h2 className='text-5xl'>
We think recruitment is broken. Be part of something better.
</h2>
<p className='text-left mt-5 text-lg'>
Greystone brings the top 10% of talent together in an exclusive
club, then pairs those dream hires with the right clients. It’s
role-finding, reimagined.
</p>
<div className='mt-5 border-b-2 border-white w-36'>
<h3 className='text-left text-lg'>FIND OUT MORE</h3>
</div>
</div>
</div>
</div>
<Footer />
</main>
</div>
);
}
Many thanks in advance if anyone can help!
It seems I didn't need to have 'public' in the src url call for anyone who may experience a similar issue in future. The video tag now looks like so:
<video autoPlay loop muted className='w-full h-screen z-10'>
<source src='/assets/bubble-video.mp4' type='video/mp4' />
</video>
adding mute attribute to the video tag solved a similar issue for me
<video
preload="auto"
playsInline
autoPlay
muted
loop
>
<source src="/video.mp4" type="video/mp4" />
</video>
I am trying to loop a very simple video contained in src/Assets/videos.
When I deploy a local server with npm start, the video performs as expected, however, when I publish to production the video does not load. I am using AWS Amplify CLI to publish the app.
I tried to:
1). View the app in a different browser (Firefox and Chrome).
2). Load the video from /public via an environment variable.
3). Load the video via the react-player module.
My initial code was home.js component rendered in app.js:
import heroVideo from '../../Assets/videos/heroVid.mp4';
//...
export default function HomePage() {
return (
<div id="hero" align="center" className="center">
<div>
<video muted autostart autoPlay loop >
<source src={heroVideo} type="video/mp4"/>
Your browser does not support the video tag.
</video>
</div>
<div style={{width: '90%'}}>
<div>
<img src={logo} style={{height: '200px', borderRadius: '100px'}} className={classes.blue} alt={`${props.brandName} Logo`}/>
<h4>A QC HOME BUYERS COMPANY</h4>
<h1>QC General Contractors</h1>
<h2 className="script">Let's build your future together</h2>
<NavLink to="/request-quote" className="simple-link"><Button variant="contained" color="secondary">Request a quote</Button></NavLink>
</div>
</div>
</div>
)
}
Then I tried to load from /public:
export default function HomePage() {
return (
<div id="hero" align="center" className="center">
<div>
<video src={process.env.PUBLIC_URL + 'Videos/heroVid.mp4} muted autostart autoPlay loop />
</div>
<div style={{width: '90%'}}>
<div>
<img src={logo} style={{height: '200px', borderRadius: '100px'}} className={classes.blue} alt={`${props.brandName} Logo`}/>
<h4>A QC HOME BUYERS COMPANY</h4>
<h1>QC General Contractors</h1>
<h2 className="script">Let's build your future together</h2>
<NavLink to="/request-quote" className="simple-link"><Button variant="contained" color="secondary">Request a quote</Button></NavLink>
</div>
</div>
</div>
)
}
Finally react-player:
import heroVideo from '../../Assets/videos/heroVid.mp4';
import ReactPlayer from 'react-player'
//...
export default function HomePage() {
return (
<div id="hero" align="center" className="center">
<div>
<ReactPlayer url={heroVideo} loop="true" volume="0" muted="true" playing="true" style={{height: "100%"}} />
</div>
<div style={{width: '90%'}}>
<div>
<img src={logo} style={{height: '200px', borderRadius: '100px'}} className={classes.blue} alt={`${props.brandName} Logo`}/>
<h4>A QC HOME BUYERS COMPANY</h4>
<h1>QC General Contractors</h1>
<h2 className="script">Let's build your future together</h2>
<NavLink to="/request-quote" className="simple-link"><Button variant="contained" color="secondary">Request a quote</Button></NavLink>
</div>
</div>
</div>
)
}
I am still relatively new to react and AWS Amplify - Is there something I am missing?
Thanks in advance for any guidance.
Have you modified your rewrite rules to add mp4 ?
</^[^.]+$|\.(?!(css|mp4|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
I was having the same issue as well, the easiest solution I found was to create an S3 bucket on AWS and upload the video file there and grab the src from said video. You're also gonna have to add public read access for your bucket/object.
Did #jsc31994 recommendation :
Uploaded the video on a S3 bucket and then used ReactPlayer
<ReactPlayer
url='https://xxx.s3.us-east-2.amazonaws.com/xxx-background.mp4'
playing={true}
loop={true}
muted={true}
controls={false}
id="background_video"
/>
So I have this code
export default () => {
return (
<main>
<section className="section-home">
<div className="bg-video">
<video className="bg-video__content" src="./video/pn-video.mp4" autoPlay loop>
<source src="./video/pn-video.mp4" type="video/mp4" />
<source src="./video/pn-video.webm" type="video/webm" />
Your browser is not supported!
</video>
</div>
</section>
</main>
)
}
In the Video.js file of this project 'https://codesandbox.io/s/py2ryvrkrx' you can see it works just fine without create-react-app. However, everywhere (both local and in codesandbox) I've tried to use create-react-app Firefox shows this in the console "HTTP “Content-Type” of “text/html” is not supported. Load of media resource http://localhost:3000/video/pn-video.mp4 failed." and I can't for the life of me figure out how to add more mime-types.
Thanks in advance for your help!
I have a video background in React. I want it to autoplay. Autoplay does not work.
I have tried:
autoplay
autoPlay
autoPlay="autoplay"
What I find particularly odd is that occasionally, it WILL work. But then it will stop.
Here is the code as it is right now.
<video loop autoPlay>
<source src={require('../../videos/background.mp4')} type="video/mp4" />
</video>
Here is the entire section of the component. I'm using a transition, but as of last week, it didn't impact it.
<div className="video-background">
<Transition in={true} timeout={1000} appear={true}>
{(state) => (
<div id="banner" className="video-foreground" style={{
...transitionStyles[state]
}}>
<video loop autoPlay>
<source src={require('../../videos/background.mp4')} type="video/mp4" />
</video>
</div>
)}
</Transition>
</div>
Well in my case added muted property.
Try this:
<video ... autoPlay muted />
Chrome 66 stops autoplay of all video that don't have the muted property.
In my case the video in React did not play because I didn't capitalize autoplay. It has to be autoPlay.
Try this (it works): autoPlay={true}
Try <video loop muted autoPlay controls = ''> ... </video>
Apparently, when placing the controls, it is possible to play the video, then placing the controls = '', we can remove the buttons from the controls and autoPlay works again.
I used useRef and the problem of not playing the video was solved.
const vidRef=useRef();
useEffect(() => { vidRef.current.play(); },[]);
<video
src="/videos.mp4"
ref={ vidRef }
muted
autoPlay
loop
/>
autoplay work with muted & controls
<video controls muted autoPlay >
<source type="video/webm" src=".../.webm" />
</video>
Well..
You can try this
autoplay=""
Like this
<video autoplay="">
<source src={require('../../videos/background.mp4')} type="video/mp4" />
</video>
if you are facing this issue ,try this it will work 100%
<video
src="/videos/ab.mp4"
controls
muted
autoPlay={"autoplay"}
preLoad="auto"
loop
> something</video>
This code gives you the solution
<video
src="/videos.mp4"
controls
muted
autoPlay={"autoplay"}
preLoad="auto"
loop
> </video>
Adding somethigs in the video body it works in my case.
<video
src="/assets/videos/presentation.mp4"
muted
autoPlay
loop >
My brand like image alt
</video>
I think the order in which you have it makes a difference too. I had autoPlay loop muted control and the video only worked on the computer with the control. Once I did muted autoPlay the video then played played on it's own as well as on mobile!
import video from 'src/../../video'
<video muted autoPlay loop>
<source src={video} />
</video>
It works only when the video is muted so please add muted attribute
<div>
<video src="/assets/loading.mp4" loop autoPlay muted className="h-[300px] w-auto" ></video>
</div>
Try allow="autoplay"