I am building a Learning App. This has a quiz-like interface, so, lots of screens. Most screens are accompanied by animations. Considering quality and file-size, .mp4 seems to be the best format for the animations. But, HTML like:
<video autoplay muted controls>
<source src="file.mp4">
</video>
doesn't autoplay on Chrome (the latest versions) if the Data Saver is turned on. (It works on Firefox and Safari.) These .mp4s are ~30 KB in size. I understand that Google is trying to prevent unnecessary data-heavy background videos from being downloaded. But, in my case, (i) asking the user to click on the play button everytime; or, (ii) asking her to turn off Data Saver, which is hidden somewhere in the browser settings, is terrible UX.
I tried a jQuery .load() followed by a .play() on pageload. I created a fake button that would do .load() and .play() during onclick(), and triggered the button click on pageload, etc. Nothing seems to work. Any hacks that would make the video autoplay even with Data Saver on?
I am the lead on the Chrome Data Saver team.
This is working as intended since Data Saver prevents autoplay.
However, I believe this behavior may be changing in a future version of Chrome.
Related
I want to show embedded video in my Angular app. The problem I am facing is that it is taking too long to load in Google Chrome (It takes around 5-10s), whereas it loads instantaneously in firefox. The format of the video is mp4, and I searched and found few issues related to Chrome and mp4 videos not working but my problem is slow loading.
My code is,
<video
*ngIf="!isDialogOpen"
class="videoURL"
controls
autoplay
loop
[muted]="true"
[src]="mpVideoUrl"
></video>
Can this issue be related to the format/codec of the video? I would prefer a solution where I don't have to change it.
all browsers have different buffering rules: depending on the speed of the network, and size of the video. what is the bitrate/ size of the video you are attempting to play?
You can check this with https://ffprobe.a.video (just enter the URL of the video you're having issues with).
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 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.
It is argued that html5 video cannot be automatically payed in mobile browsers.
However, I found this website autoplaying video (though not looping it) on mobile:
http://campaign.nissan.co.il/qashqai0515
How is this possible?
Autoplay does not work on all versions of iOS and modern versions of Android. Both platforms require the user to click the video or a play button to initiate video play. It was made this way to conserve the devices battery life and limit cellular bandwidth.
There have been some workarounds in the past that use javascript to trigger the play event however from my testing those workarounds no longer work. Another trick is showing a sequence of images that looks like a video - Apple has done this in the past.
Note: I tested the link you provided in iOS 8 and it does not autoplay.
I have a sound effect that I need to play whenever someone taps on something but the first tap sound always lags and then it's fine after that. I understand it should have something to do with the preload but I've had preload set to auto the entire time.
<audio id="effect" src="audio/bloop.mp3" preload="auto"></audio>
How can I get rid of that initial lag?
Incase you are using - Safari on iOS:
Preloading and on iOS devices is disabled to save bandwidth.
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it.
Source: Safari Developer Library