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.