Autoplaying silent videos SHOULD BE better than using GIFs but it's not
Hi,
I am a web développer and I am currently trying to solve accessibility issue regarding autoplaying videos on firefox android.
I am trying to use video as a graphical element. Silent, non invasive. Not for ad purposes but would literally one of the main reasons users would go on that - thoses websites.
I do not wish to add "controls" to those videos. They could be videobackgrounds, they could be part of a multilayer element and you couldn't interact with it. They are ment to be used as "autoplayed animations".
Now I could use GIFs. It's silent, non-invasive, décorative and works seemlessly accross all browsers.
But GIF is litteraly the worst file format still around today. It is ugly, slow and VERY heavy.
So for a few years now I have been using mp4 with nice compression which enables lightweight animated media, beautiful and performant for the same usecase.
I just add `autoplay muted loop` to my video element and it's running great.
I am certainly not the first one to make the case for replacing GIFs with video.
https://web.dev/replace-gifs-with-videos/
Today I discovered that, unlike what is stated on mozilla's guide to autoplay media (and everywhere else in the documentation and even in the javascript console) the default settings on firefox for android is to block every video whether volume is set to 0, video is muted or not.
https://user-media-prod-cdn.itsre-sumo.mozilla.net/uploads/images/2020-11-11-14-32-47-6dc7f4.png
On the screenshot above, the video element already had the autoplay and muted properties on pageload (hence the first yellow line). For good measure I tried to mute it again and set volume to 0 then hit the play() function.
Now.
I don't mind asking for consent. It's great. I love asking for user consent. But can I ?
Here is some things I find weird :
1. I don't have to ask for consent to use ugly, heavy, bloaty, slow GIFs
2. I don't have to ask for consent to render 3D with WebGL
3. I can easely ask for consent to use any user's webcam, microphone, accelerometer, filestorage and what not.
And :
I can not ask for consent to play a silent optimised, lightweight, beautiful, performant animation. For this, I have to have the user interact on every video on every page on every page load OR that he has to come to the idear that those blank backgrounds and still images are actually non-playing videos and that he should probably google how to find the hidden setting to enable video autoplay.
OR Am I missing something ? Maybe there is an API to ask the firefox user if he wants to whitelist my website for video autoplay ? Maybe there is a way ? It's just no where to be found in the documentation and it's not written anywhere that the default behavior or firefox (android) is to block autoplaying video content.
In any case, encouraging the use of GIF over video is the worst thing we could do. As long as firefox defaults to blocking autoplaying silent videos and gives no option to ask for sitewide consent, this is the statement mozilla is making for every developper (who still cares about cross-browser -> firefox compatibility).
I am genuinly trying to find a solution better for firefox, for the user, for the developper, for the servers. But this seems like a dead end.
All Replies (5)
This is a webpage where you can test the autoplay feature not working even though the video is silent/muted. You can start/stop with the "pause" button (it should work then) You can also see that if you reload the page, you have to pause/start again.
https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
Maybe it is working for you ? But I installed firefox mobile today for testing purposes. It is coming with the up-to-date default settings mozilla sets for the user. Media autoplay is disabled.
Google's article on why they enabled muted autoplay by default on chrome for android.
https://developers.google.com/web/updates/2016/07/autoplay
"Disabling autoplay had the unintended effect of driving developers to alternatives such as animated GIFs, as well as <canvas> and hacks. These techniques are much worse than optimized video in terms of power consumption, performance, bandwidth requirements, data cost and memory usage. Video can provide higher quality than animated GIFs, with far better compression: around 10 times on average, and up to 100 times at best. Video decoding in JavaScript is possible, but it's a huge drain on battery power."
There is a thousand applications for "animated images". They are not all about being "filmed content with a start, story, end and sound". It could be a HUD element, it could be a gif, it could be decorative. It's not a "play/pause/forward/backward" type of video, it's an animation. In that case, requiring to "click" on the element kills the purpose of that element being a seemlessy integrated animated visual element.
Firefox makes this simply IMPOSSIBLE accross the whole internet (unless you don't care about firefox compatibility).
OR I could use GIFs, javascript video decoding, full frame exported images animated by javascript. But all of thoses technique are worse from a performance, storage and/or quality standpoint.
Also I never mentioned "iframes". And I specified that the videos are silent. So there is not "click" to do (if autoplay is working) because there is no sound, it's animations.
Here is one most simple exemple (not made by me and not usecase) https://codepen.io/zitrusfrisch/pen/vymGI
Athraithe ag rsepierre ar
Here is one example (video)
It's a portfolio website, where each project has a "video thumbnail". They are short, silent, looping video and very short (3-6 seconds).
It's impossible to do this for firefox android because the default setting is to block "ALL VIDEO AUTOPLAY EVEN MUTED".
Now by looking at the video I shared you can assume multiple things : - Users don't want to interact with the video. Clicking on the video actually brings you to the project page. - They are not abusive, annoying pop-ups and non intrusive (people going on a portfolio expects to see the portfolio, it is safe to assume they want to see what I want to show) - They are not battery killers, bandwidth killers or others because I optimised their length, quality, compression for the devices - They are not worse that GIFs (see google and web.dev article on why we should replace GIFs for video) - They are not worse than 3D WebGL rendering (which is pretty cool. AND doesn't have "anti-autoplay" policies in firefox. - There is NO WAY I can ask for sitewide video autoplay consent (firefox doesn't provide that, eve' though you can ask for Webcam-microphone-geo-accelerometer-phonestorage usage/consent/authorisation for exemple.
firefox for android makes this website not possible. You just can't make it work.
Individual users can update their global setting through
menu > Settings > Site Permissions
and switching Autoplay from "Block audio and video" to "Block audio only" if they like.
I don't see a method for changing the permission on a per-site basis, but I haven't looked very hard for it.
If you want to suggest changes to Firefox for Android, you can file an issue on Github here: