<video ref={vidRef} controls={false} autoPlay={true} muted loop={true} onContextMenu={(e) => e.preventDefault()}>
<source src="./img/video.mp4" type="video/mp4" />
</video>
I am trying to play video infinite so i have used loop attribute on video tag but it is not working in fireFox, but it is working in chrome though.
I am using react for this project. So any solution on this?
Write like this:
<video src="./img/video.mp4" type="video/mp4" ref={vidRef} autoplay muted loop onContextMenu={(e) => e.preventDefault()}>
</video>
No need for true or false.
I am hoping someone can help me. I am trying to apply the mouseenter and mouseout effect to these videos. I am having difficulty accomplishing that, I have tried using javascript in the HTML section of my react code by calling document.querySelectorAll('.clip'), but nothing works. I am truly lost and I thank you in advance for your time.
import React from 'react';
import './Project.css'
import video from '../videos/Screen Recording 2022-04-01 at 8.22.57 PM.mov';
import video1 from '../videos/Screen Recording 2022-04-01 at 8.23.25 PM.mov';
import video2 from '../videos/Screen Recording 2022-04-01 at 8.25.20 PM.mov';
import video3 from '../videos/Screen Recording 2022-04-01 at 8.27.28 PM.mov';
import video4 from '../videos/Screen Recording 2022-04-01 at 8.28.35 PM.mov';
import video5 from '../videos/Screen Recording 2022-04-01 at 8.30.37 PM.mov';
import video6 from '../videos/Screen Recording 2022-04-01 at 8.34.30 PM.mov';
import video7 from '../videos/Screen Recording 2022-04-03 at 3.51.52 AM.mov';
import video8 from '../videos/Screen Recording 2022-04-03 at 3.48.52 AM.mov';
const Project = ()=> {
return (
<div className='project'>
<div className='container'>
<div className='project-wrapper'>
<div className='project-content'>
<h1><span className='span'>3.</span> Past Projects</h1>
<div className='project-content'>
<div className='box'>
<video
className='clip' src={video2} muted type='video/mp4' loop>
</video>
</div>
<div className='box'>
<video className='clip' src={video8} muted type='video/mp4' loop>
</video>
</div>
<div className='box'>
<video className='clip' src={video6} muted type='video/mp4' loop >
</video>
</div>
<div className='box' >
<video className='clip' src={video} muted type='video/mp4' loop >
</video>
</div>
<div className='box'>
<video className='clip' src={video4} muted type='video/mp4' loop >
</video>
</div>
<div className='box'>
<video className='clip' src={video5} muted type='video/mp4' loop >
</video>
</div>
<div className='box'>
<video className='clip' src={video3} type='video/mp4' loop >
</video>
</div>
<div className='box'>
<video className='clip' src={video7} muted type='video/mp4' loop >
</video>
</div>
<div className='box'>
<video className='clip' src={video1} muted type='video/mp4' loop >
</video>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Project
All you have to do is create a ref and assign the ref to a video element and onMouseEnter event play video and onMouseLeave pause video make this a component and sent video src as a prop which returns that, hope you understand what I mean.
const ref = useRef(null);
const handlePlayVideo = () => {
ref.current.play();
}
const handlePauseVideo = () => {
ref.current.pause();
}
return (<video ref={ref}>
<source src={video} type='video/mp4' onMouseEnter={handlePlayVideo} onMouseLeave={handlePauseVideo}/>)
</video>
I have used playsinline with the webkit, it still does not seem to work- please have a look at the code and the video
Here is the link for the video demonstrating the problem https://drive.google.com/file/d/16jjVvLMpD64d-PYExxcNSshwbDjVGRsK/view?usp=sharing
<video
class="introvideo"
playsinline
webkit-playsinline
autoPlay={true}
loop
preload={true}
muted={true}>
<source
autoPlay={true}
muted={true}
loop
alt='starlatechdemovideo'
src="https://res.cloudinary.com/xxxx/video/upload/c_scale,w_800,q_auto/FinalPrct__cz7.mp4"
type='video/mp4'
/>
</video>
The problem was using playsinline instead of playsInline in ReactJS. Also, I added webkit-playsinline={true}.
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"