I'm using autoplay video sporadically throughout a client's site, however the below code is (for some reason), not autoplaying in Chrome(63.0.3239.132). Works fine in Safari and FF.
I am not getting any console errors either?
<video src="https://player.vimeo.com/external/247833422.hd.mp4?s=8d872a36d3dbe7f74e9613ab144d088b5bab6649&profile_id=174" poster="" preload autoplay loop muted></video>
Quick fix for Chrome:
<video src="https://player.vimeo.com/external/247833422.hd.mp4?s=8d872a36d3dbe7f74e9613ab144d088b5bab6649&profile_id=174" id="video1" poster="" preload autoplay loop muted></video>
<script>
document.getElementById('video1').play();
</script>
In addition to this, set the video to muted <video autoplay loop muted><source...
According to google chrome's policy unmuted videos will not auto play or programmatically play. To auto play video just mute your video by add muted attribute like below :
<video autoplay loop muted="muted"></video>
Related
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've searched a lot on how to enable video autoplay with sound works in the html.
Autoplay only works with muted
Not woring in some browsers
The thing is, when the autoplay is followed by muted attribute, the autoplay works just fine.
I have this video, and was suppose to autoplay, without user interaction(controls) and with sound on.
//start condition (jquery)
//$('video').removeAttr('muted');
//end condition
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<video class="childhood-img" muted="muted" autoplay="autoplay" loop="loop" playsinline="playsinline" type="video/mov" src="https://www.youtube.com/watch?v=MDLn5-zSQQI" >
</video>
</div>
My dout is, how can enable autoplay, with sound on and without controls abritute?
Having autoplay with sound is not possible anymore without an user interacting with the page. Browser vendors disabled this feature because it annoyed a lot of people and it was not safe in working environments.
Interesting ressource: https://jamonserrano.github.io/state-of-autoplay/
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 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>
I need the controls, but don't want the video to autoplay.
The code below, doesn't work.
<video id="Video1" poster="assets/img/bg-header.jpg" autoplay="false"
controls autostart="false">
Thanks,
Sabin
Html5 videos don't autoplay by default.
Remove autoplay="false".
JS Bin