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"
Related
<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 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}.
I made a Sandbox showing the problem. In the Sandbox the Video player is working but replacing the code with below code is not working. If I move the src={filePa.. to <video.. then it works but without caption dunno
I write this code and it works:
return (
<div className="pg-driver-view">
<div className="video-container">
{this.renderLoading()}
<video
style={{ visibility }}
controls
type={`video/${fileType}`}
onCanPlay={e => this.onCanPlay(e)}
src={filePath}
>
Video playback is not supported by your browser.
</video>
</div>
</div>
);
Then I try this and it's not working the player does not show no warning no messages in the log:
return (
<div className="pg-driver-view">
<div className="video-container">
{this.renderLoading()}
<video style={{ visibility }} controls onCanPlay={e => this.onCanPlay(e)}>
Video playback is not supported by your browser.
<source src={filePath} type={`video/${fileType}`} />
<track src="test_captions_en.vtt" kind="captions" srcLang="en" label="hello_english_captions" />
</video>
</div>
</div>
);
Any idea?
I am implementing HTML in react to generate and facing a problem with video autoplay
this is how my file looks like
home.js
import video_two from './../images/tab-sidebar.mp4';
class Noticias extends Component {
render() {
return(
<video autoplay muted loop class="hide-tablet video-2">
<source src={video_two} type="video/mp4" />
<p>Joykal Infotech</p>
</video>
)
}
}
generated HTML
<video loop="" class="hide-tablet">
<source src="/static/media/noticias-full-website-scroll.069654da.webm" type="video/webm">
<p>Joykal Infotech</p>
</video>
I don't understand why and how the autoplay and muted are removed from the video tag. Suggestions are appreciated
Update
Figured it myself the react is camelcase sensitive and it supports autoPlay rather than autoplay.
React is camelcase sensitive so you should use autoPlay instead of autoplay
like this:
<video autoPlay muted loop class="hide-tablet video-2">
<source src={video_two} type="video/mp4" />
<p>Joykal Infotech</p>
</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!