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/
Related
I am trying to play an mp4 file I have stored locally on my computer (when I play it with quicktime it works perfectly). For some reason however I can't get it to work with sound. If I include the 'muted' keyword, the mp4 plays, however with no sound (makes sense). However if I remove the 'muted' keyword, it doesn't play at all.
Any ideas what I am doing wrong?
Here is my code:
<video id="introVideo" width="50%" height="100%" autoplay loop muted>
<source src="../static/myvideo.mp4" type="video/mp4">
</video>
Did you tried with another web browser? Because autoplay is not allowed and even more on sounds with Chrome
This may be a little late, but starting in Chrome 66 autoplay doesn't work unless the muted attribute is included.
So in Chrome you can autoplay a muted video or autoplay won't work.
Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-autoplay
Edit:
https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html
Search for 'autoplay' in the chromium blog link.
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>
I have an HTML5 video embeded in a portfolio I want to autoplay & be muted until sound is initiated, so when a user is scrolling down the page it's already playing but there isn't annoying sound for the user. It is working fine on all browsers on my desktop and tablet, however on iPhone mobile the sound is permanently muted, even when a user tries to adjust the volume. Here here's the code I am using, is there some javascript I can implement/use instead that will solve this?
<video id="cla-generic" preload="auto" onclick="this.paused?this.play():this.pause()" autoplay controls muted loop>
<source src="video.mp4"/>
</video>
Autoplay does not work on iOS and android.
Thats why you are getting no sound.
Take a look at this thread:
iPhone HTML5 Audio tag not working
Anyone does have the idea of how apply the html5 code for video and allow autoplay in Ios10 or latest? Cause seems like Ios10 do have the latest update and it couldn't allow Autoplay. Following are the tag that im using.
<video preload="auto" id="lady_vid">
<source src="vid/lady.mp4" type="video/mp4"></source>
</video>
I was able to enable autoplay by using the following code:
<video autoplay muted playsinline>
<source src="http://example.com/video.mp4">
</video>
You need autoplay to enable autoplay.
You need muted, because only videos without audio track or with disabled audio track can be autoplayed.
You need playsinline, because only inlined videos can be autoplayed. This will also cause your video to be displayed inside the page itself and not be opened in fullscreen video view.
I was only able to enable it after specifying full url to the video, e.g. http://example.com/video.mp4 (this is a fake url obviously). It was not working with relative url, such as
<source src="video.mp4">
or
<source src="folder/video.mp4">
===========
Update:
After testing video on iOS10 for a while, I've realized that iOS10 fails to play a lot of videos. It's not a codec problem: if you encode two videos with exactly the same parameters, one might play and the other one won't.
What's even more intresting, is that most videos that cannot be played on iOS10 play perfectly well on iOS9 and iOS8.
So if your video isn't playing, try opening it with iOS Safari browser via direct link - maybe it doesn't work at all on iOS10.
I'm attempting to embed video via HTML5 and leveraging video.js http://www.videojs.com/
Seems to be working fine on Mac Chrome. Video start immediately. However, on Mac Safari - not so much. Video opens paused at the first frame and just sits till (apparently) the entire thing is loaded.
Makes sense that the video has to load. But what is going on with Chrome that mitigates that, and why is the lag so apparent with Safari?
And what can I do to prevent the delay (e.g., I would like the video to start immediately when the page is loaded).
<div>
<video width="640" height="360" preload="auto" autoplay="autoplay" loop="loop" >
<source src="href="/sites/default/files/videos/original/1918_Pandemic_Flu.mp4" type="video/mp4" />
No flash player has been set up. Please select a player to play Flash videos.</video>
</div>
add controls autoplay The autoplay attribute is a boolean attribute.
When present, the video will automatically start playing as soon as it can do so without stopping.since some times MIME types not support in browser
or <video loop autoplay width='100%' height='100%' src='//video.mp4' type='video/mp4'></video>
or
<video loop autoplay controls="true" width='100%' height='100%' src='//video.mp4' type='video/mp4'></video>