Why is this an issue?

Autoplaying media consumes unnecessary energy, especially when users might not be actively engaging with the content. This can drain battery life on devices, particularly on mobile devices, leading to increased energy consumption and potentially contributing to environmental impact. It can also consume data, particularly for users on limited data plans or in areas with poor internet connectivity. This can lead to unnecessary data usage and potentially increased costs for users.

However, even without autoplay, segments of video or audio files might still download. This leads to unnecessary data usage, especially if users don’t commence playback. To mitigate this, it’s crucial to prevent browsers from preloading any content by configuring the appropriate settings.

Video:

return (
  <>
    <video src="video.mp4" autoplay/> // Non-compliant
    <video src="video.mp4" preload="auto"/> // Non-compliant
    <video src="video.mp4" autoplay preload="auto"/> // Non-compliant
  </>
)
return (
  <video src="video.mp4" preload="none"/> // Compliant
)

Audio:

return (
  <audio controls src="audiofile.mp3" autoplay></audio> // Non-compliant
)
return (
  <audio controls src="audiofile.mp3" preload="none"></audio> // Compliant
)

Resources

Documentation

Articles & blog posts