I know that many newer browsers now disable autoplay when the video isn't muted or mute it and then play. Without user interaction it's also not possible to call play on a video. That's understandable, but I'm wondering how youtube is still able to start the videos with sound.
I checked and they do use the video tag, just not with any autoplay/muted attributes and loading some blob. It's not the user interaction opening the video, it also starts when opening a link in incognito mode.
So my conclusion, it should still be possible. But how? Or did browsers add some kind of exception for trusted video streaming sites?
Thanks in advance
For the Youtube case, it is probably a pre-populated white list
https://blog.google/products/chrome/improving-autoplay-chrome/
If you don’t have browsing history, Chrome allows autoplay for over 1,000 sites where we see that the highest percentage of visitors play media with sound.
For other generic cases, you can refer to the following rules (for Chrome at least)
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
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.
Related
I need to make a video autoplay with sound when visited via a deeplink.
According to https://developer.chrome.com/blog/autoplay/, it is not allowed, because the video is NOT muted.
However, if you open a Youtube video in a Guest Chrome tab (meaning Media Engagement Index is empty and doesn't matter here), it autoplays, and it has sound.
That means Youtube bypasses the Chrome policy, is that correct? I saw other websites do the same as well.
I am wondering how to do the same in my app. Could anyone teach me?
Note: the video in my app is from a 3rd party and is embedded in my app, that means the video's URL has a different domain from my app's. But I think it shouldn't matter.
Thanks in advance!
I've tried to find a workaround to autoplay video with sound on and found a couple, but none of them are works for me. Also I've found a tons of replies that this is not possible to autoplay video with sound on, but in the same time I saw a lot of video ads that start playing automatically with sound. So seems like there is a way to make it happen at least for advertisers. I heard about whitelist for websites which are allowed to autoplay with sound such as youtube, but I guess this is not the case for ads. So, does anybody know how could it be implemented that way?
this is the real reason
https://blog.google/products/chrome/improving-autoplay-chrome/
Chrome does this by learning your preferences. If you don’t have browsing history, Chrome allows autoplay for over 1,000 sites where we see that the highest percentage of visitors play media with sound. As you browse the web, that list changes as Chrome learns and enables autoplay on sites where you play media with sound during most of your visits, and disables it on sites where you don’t. This way, Chrome gives you a personalized, predictable browsing experience.
As you teach Chrome, you may find that you need to click “play” every now and then, but overall the new policy blocks about half of unwanted autoplays, so you will have fewer surprises and less unwanted noise when you first arrive at a website. The policy is enabled in the latest version of Chrome—update today and try it out.
This works perfect with other browsers but safari automatically downloads file.
<iframe src="lib/audio/voice.mp3" allow="autoplay" class="audio-main" id="iframeAudio">
</iframe>
I need play background audio in a website. Opera and Chrome are working fine unfortunatelly Safari Browser open website automatically audio download.What exactly is the problem, Thanks for advance
No Auto-Play by default says the man
According to Safari / WebKit Auto-Play policy it gives users the ability to browse the web with fewer distractions, particularly in the form of relief from websites that auto-play with sound. They instruct websites to assume that any use of video or audio will require a user gesture or click to play.
Policy configuration
Users can enable auto play functionality on a per website bases.
Safari >> Preferences >> Websites >> Auto-Play
Options are:
Allow All Auto-Play
Stop Media with Sound (default)
Never Auto-Play
Functionality iframe allow autoplay works in Safari
When the user has allowed auto play from a specific website the iframe tag works as expected.
<iframe allow="autoplay" src="happy.mp3"></iframe>
Not surprising though so too does the <audio> element load and play on its own.
<audio autoplay loop src="happy.mp3"></audio>
Detect auto play is disabled and display player
However it should be expected that this functionality will not be enabled, since the ability exists for users to disable it, so it’s important to detect if auto play was denied and proactively react accordingly.
var promise = $('video')[0].play();
if (promise) promise.catch(error => {
// Auto-play disabled show controls
$('audio').attr('controls', '');
});
For this option we do not need auto play at all since we are manually calling play. This will not work of course if a user action is required so all we are left to do is to add the controls and display the player.
Audio with controls
For the sake of completion, there's always the other option; avoid auto play all together... but what's the fun in that.
<audio controls src="happy.mp3"></audio>
nJoy!
I attempted to add a Hero background video to our website. It's being served from mux.com.
I use it with HLS, but for Chrome it uses Media Source Extensions from what I gather.
I know that for HTML5 video to auto play, it has to be muted also, and I have both parameters over there.
Apparently, on Android Chrome I get behaviour where it freezes on the first frame (black), but doesn't continue and I cannot trace why.
In case of freezing, it still does load the video, just that it's not getting autoplayed.
I am out of clues.
Isolation sandbox:
https://codesandbox.io/s/32yky6x7mq
https://32yky6x7mq.codesandbox.io/
In my attempts, I have reduced this down to simple HTML app with Hls.js library and basic <video> tag where it breaks on mobiles.
How do I get the video to autoplay on mobiles?
P.S. To see exactly what I have tried, please see edit history, as I have been trying lots of things.
On my device specifically, Android Chrome, it's caused by Data Saver.
Disabling Data Saver, the video autoplays.
It's paradoxical, because with Data Saver I expect for the video to not be loaded at all, but it's getting loaded and the autoplay gets interrupted instead - resulting in more waste.
Possibly, there are other settings out there in the wild that prevent autoplay, for instance, couldn't find the exact reasons why iOS is not working. There are hints about playsinline attribute, which I have not tested yet. (Will update when I do)
Worth noting, is Feature-Policy header too: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
It didn't help me in my scenario, but it can probably be related with autoplay in other scenarios.
I have autoplay in the video tag, but it still requires mousing over it. From what I read it's because it requires user interaction to play the video, so users won't be annoyed by videos playing without their consent. Is there a way to get around that or fake the event well enough to fool the browser?
No. And if there was a way to fool it, Apple would just close that loophole on the next release.