As of 2018, modern web browsers block autoplaying video with audio to save battery power and ISP data charges.[1] However, they allow muted video to play automatically for pragmatic reasons. When browsers block muted video from playing automatically, websites were falling back to still image codecs that have even worse compression when used for animation.[2] These codecs include GIF, JPEG, and PNG, and some playback techniques don't even use JavaScript.[3] So if you want to develop a browser extension that blocks all autoplaying animation, you'll need to ensure all these methods are blocked:
<video>
(203 kB)<video>
(136 kB)<video>
(124 kB)<img>
(2.0 MB)<img>
, with src=
cycled using JavaScript (655 kB)<img>
, with src=
cycled using JavaScript (1.7 MB)<div>
, cycled using CSS sprites and animation with steps
(590 kB)<div>
, cycled using CSS sprites and animation with steps
(1.5 MB)New 2018-07-25:
<img>
, with left:
cycled using JavaScript (655 kB)<img>
, with left:
cycled using JavaScript (1.7 MB)<img>
, with visibility:
cycled using JavaScript (655 kB)<img>
, with visibility:
cycled using JavaScript (1.7 MB)<img>
, with display:
cycled using JavaScript (655 kB)<img>
, with display:
cycled using JavaScript (1.7 MB)New 2019-02-06:
<img>
, with opacity:
cycled using JavaScript (655 kB)<img>
, with opacity:
cycled using JavaScript (1.7 MB)Discussion
[1] "Hate noisy autoplaying videos? Google Chrome will finally block them by default" by Liam Tung states: "Google's policy allows autoplay if the video is muted or doesn't have audio", citing Chrome and Chromium blogs (source 1, source 2, source 3, source 4, and source 5).
[2] "Semantic way to declare a video as an image (#976)" by Mounir Lamouri
[3] "CSS Sprite Sheet Animations with steps()" by Guil Hernandez