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
Related
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?
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>
All is in the title. When i access a page with a video tag, autoplay works fine.But when i reload the page, the video dont start.
What can i do to auto start the video ?
<video autoplay loop poster="the_poster.jpg" id="bgvid">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
i try to add a ?ts=timestamp.
i try also to start the video with JS but i get a "promise error"
I've had same issue here and it solved by adding muted attribute to video tag.
For Google Chrome, according to this update note, autoplay with sound needs some conditions. However, Muted autoplay is always allowed.
I have a video in my header, however, it will only play once you click on the home link in the menu to go to the /index.html. It will not play when the page first loads. I have also tested to see if manually entering /index.html at the end of the url works, it does not. The code I am using to play the video is:
<video autoplay loop>
<source type="video/mp4" src="images/untitled.mp4" />
<source type="video/webm" src="images/untitled.webm" />
</video>
And my website is http://richardgao.5gbfree.com (source code can be checked)
How do I get the video to play automatically when I first load the page?
Thanks
have you tested it in chrome? for chrome you need to switch off sound:
<video autoplay muted loop> ... </video>
and at least on some versions of safari autoplay doesn't work at all. you might start your vid using jquery, something like:
<video id="video" ...> ... </video>
$(document).ready() {
$('#video').play();
}
I have been looking into how to implement HTML5 videos as a
background
video on web and mobile, below is the following code-
it displays but not autostarts, this is the problem
<video width="100%" controls autoplay>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
Depending on your Chrome version you might get the new implementation of video autoplay rules:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
On mobile, the user has added the site to his or her home screen.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Taken from: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
So you can try it muted:
<video width="100%" controls autoplay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>
I had similar issues with autoplay not having any effect regardless of usage of muted. Unexpectedly I had success when specifying autoplay as camel case autoPlay
In React you need to add the attributes of tags in camelCase. So in this case It has to be autoPlay.
It's too old thread now. But still I have a suggestion if you want to use.
Instead of the autoplay attribute(because other told it's only work always if it also has muted) you could use one thing:-
function playVideo()
{
document.getElementById("vid").play();
}
a very simple function in javascript. Make sure to give your video Id 'vid' or change it here. Video Example
<video id="vid" loop controls>
<source src="Videos/vid.mp4" type="video/mp4">
</video>
and in body tag write this:-
<body onpageshow="playVideo()">
It worked for me. Maybe for you too
Make sure you check browser permissions. If the site is not secure (http), then autoplay on websites will be disabled.
To make changes you can click on the left side of the Address Bar of the browser and click Allow audio and video.
Just change autoplay as camel case autoPlay
<video controls autoPlay loop muted>
<source src={myvideo} type="video/mp4"/>
<source src={myvideo} type="video/ogg"/>
Your browser does not support the video tag.
</video>
Had a similar issue. The fix is to camelCase autoPlay.
So the following should work:
<video autoPlay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>