i want to add a loop video on my react-app.
I did it like this
<video
ref={videoRef}
playsInline
autoPlay
muted
loop>
<source src={Video} type='video/mp4' />
</video>
it's working fine on Chrome/Firefox on mobile and on desktop.
But it's not playing on iPhone (Safari).
It is playing locally but when i deploy it. it's not playing :(
I had a similar kind of requirement with my previous project, the following code is working fine, from this we will have a muted video running in loop with autoplay.
<video width="300px" height="500px" autoplay="autoplay" muted loop>
<source src="https://user-images.githubusercontent.com/27606753/144578902-9b14dc56-9056-4650-942f-4d25f0ecbcc1.mp4" type="video/mp4" />
</video>
This is so because, according to the apple documentation, a video only plays automatically if:
it contains the playsinline attribute, and
it has no audio track present OR it contains the muted attribute.
So I'd suggest you include the playsinline attribute. Learn more on inline playback here.
I created a sandbox and deployed but was unable to reproduce your issue on iOS 15.2 (iPhone 12), it autoplays and loops as expected. Could please add more details?
Related
Hy, I want to play videos automatically without controls. because I'm using it as a website banner background. Please point out what I have done wrong. I'm using chrome browser.
<video
autoPlay
// playsinline
autoplay
muted
loop
className="stakingNft"
>
<source src="\assets\video\landing.mp4" type="video/mp4" />
</video>
--------------------------------
<video
autoPlay
playsinline
autoplay
muted
loop
className="stakingNft"
>
<source src="\assets\video\landing.mp4" type="video/mp4" />
</video>
Here is the codesandbox
autoPlay might be defined twice and in small case that's the reason I think.
Looks like there's issue in path of video.
You used backward slash instead of forward slash.
Here is the reference: https://stackblitz.com/edit/react-xbfng5?file=src%2FApp.js
I'm trying to autoplay video without sound and controls on my iPhone 14Pro. The video should also repeat so I have included a loop option. It seems like the video does not show at all on iOS devices. Everywhere else works. The iOS version I have is 16.2.
I have tried to add options like autoplay muted and playsinline but nothing seems to have an effect. Here is the code:
<video class="video" preload="none" muted loop autoplay playsinline>
<source src="my-video.mp4" type="video/mp4" />
</video>
Is there any workaround how I can make this work on iOS devices without controls and autoplay?
I have added a code for playing video as a banner but facing one problem in that is whenever the video is completed getting a black screen for a moment and again the video is playing.
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted" width="100%" height="400"><source src="http://localhost/blue/wp-content/uploads/2019/03/4K_UHD_Drone_Fly_Past_Radio_Tower_Portland_Oregon_Crest_Point_Fernando-1.mp4" type="video/mp4"></video></div>
I have tested this in all the browser. Please take a look to the attributes in this tag and this will also work in your case.
<video width="400" controls playsinline loop muted >
<source src="https://app.coverr.co/s3/mp4/Over-the-Map.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
UPDATE: newer versions of mobile phone browsers on Android and iOS do support autoplay function. But it only works if the video is muted or has no audio channel. :-)
For more details on the UPDATE section read this:
https://webkit.org/blog/6784/new-video-policies-for-ios/
I've amended your tag a little to include autoplay loop instead of autoplay="true" loop="loop".
I also think you've just got your HTML syntax a little wrong - instead of putting the source in a <source> tag, you should include a src="" within the <video> tag like so:
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted="muted" width="100%" height="400" src="https://app.coverr.co/s3/mp4/Over-the-Map.mp4" type="video/mp4"></video>
</div>
As you can see there's no black screen at the end of this looping video. If it is still happening on for you with your own material, it might actually be your video that has a slight gap at the end?
Here is my html for making my video autoplay and loop with no problems. Give this a try.
<video muted autoplay loop>
<source src="" type="video/mp4" />
</video>
I have wordpress home page where I added video tag.
This is source code.
<video id="video1" width="auto" autoplay loop controls="false">
<source src="Browser#2x.mp4" type="video/mp4">
</video>
Here, what the important is controls="false" and autoplay loop,
I want to hide controls and autoplay with looping.
It work well in chrome but not working in safari.
It weird at first I open it on safari it works but if I reopen, it doesn't.
I want to know how to solve this and if I have to use other video file type, what should I use?
Try this:
<video loop autoplay controls="true" id="video1" src='Browser#2x.mp4' type='video/mp4'></video>
Chrome says "This plugin isn't supported" even though I have both video formats. Strangely I can play HTML5 video on other websites (with the same computer/browser). I looked at the source and they have mp4 first then webm.
I tested the site with chrome from another computer and it works fine. Chrome is at the latest version on both computers.
Here is my code:
<video preload="auto" autoplay loop>
<source src="video/ssweb.mp4" type="video/mp4"/>
<source src="video/ssweb.webm" type="video/webm"/>
</video>
<video preload="auto" autoplay loop muted>
<source src="video/ssweb.mp4" type="video/mp4"/>
<source src="video/ssweb.webm" type="video/webm"/>
</video>
Add the muted attribute to the <video> tag.
As you explain your issue...Please check with your 'Chrome extension' in setting, it might be possible that you have any extension which is creating problem in playing the video.
Please try to stop all extensions and then try to run the page again. Hope it will work.