background video no auto play on loaded in firefox on mobile device like smartphone and tablet

[santhoshnumberone]

Describe the bug

I have a background video on a webpage, the video is av1 inside mp4 container and supported by firefox
Only poster image is displayed, video never starts playing

this is the code

<script lang="ts">
  import vi from './assets/videofile.mp4'
  import posterimg from './assets/PosterImage.png'
</script>

<main>
  <video
  autoplay 
  muted 
  loop
  Playsinline
  src={vi}
  poster={posterimg}>
  </video>
</main>

<style>
video 
{
  width: 100%;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
</style>

Reproduction

Unable to reproduce the issue while development in responsive design mode in firefox.

You can create a svelte app using vite, with simple video playing in background.

built it and host it on github pages once for free and access it from a mobile device like smartphone or tablet from firefox check it

The issue only on firefox when opened on mobile device, works fine Chrome & Opera on both computer and mobile device.

Logs

firefox browser log details from android browser


Media resource https://mywebsite.com/assets/videofile.87f84cd1.mp4 could not be decoded. mywebsite.com
Some cookies are misusing the recommended “SameSite“ attribute 2
Cookie “_ga” will be soon rejected because it has the “SameSite” attribute set to “None” or an invalid value, without the “secure” attribute. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite analytics.js:35:486
Cookie “_gid” will be soon rejected because it has the “SameSite” attribute set to “None” or an invalid value, without the “secure” attribute. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite analytics.js:35:486
Media resource https://mywebsite.com/assets/videofile.87f84cd1.mp4 could not be decoded, error: Error Code: NS_ERROR_DOM_MEDIA_METADATA_ERR (0x806e0006)

### System Info

```shell
$ npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers

  System:
    OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 406.05 MB / 3.72 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 17.4.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 8.3.1 - /usr/local/bin/npm
  Browsers:
    Firefox: 96.0

### Severity

annoyance

[rmunn]

A quick DuckDuckGo search for the NS_ERROR_DOM_MEDIA_METADATA_ERR code led me to https://bugzilla.mozilla.org/show_bug.cgi?id=1377278, which is about invalid and/or unsupported video formats. One possible cause for your issue that I can think of is that perhaps the Android device you're playing the video on is an older device that doesn't support the AV1 codec. https://en.wikipedia.org/wiki/AV1 says that AV1 is supported starting from Android 10. If your device is running Android version 9 or earlier, it's possible that that's the cause.

Whatever the root cause of the issue, though, I don't think it's a bug in Svelte. mozilla-mobile/fenix#23675 might be the right place to report this bug, rather than here.

[santhoshnumberone]

A quick DuckDuckGo search for the NS_ERROR_DOM_MEDIA_METADATA_ERR code led me to https://bugzilla.mozilla.org/show_bug.cgi?id=1377278, which is about invalid and/or unsupported video formats. One possible cause for your issue that I can think of is that perhaps the Android device you're playing the video on is an older device that doesn't support the AV1 codec. https://en.wikipedia.org/wiki/AV1 says that AV1 is supported starting from Android 10. If your device is running Android version 9 or earlier, it's possible that that's the cause.

Whatever the root cause of the issue, though, I don't think it's a bug in Svelte. mozilla-mobile/fenix#23675 might be the right place to report this bug, rather than here.

As already mentioned in my first comment does work inside chrome and Opera on same device which runs on Android 9 but issue with Firefox only so it might be an issue with Firefox itself I have raised the issue on Android Firefox github as well

[7nik]

According to this comment, the issue was fixed.
Though, the following comment says the video doesn't autoplay after page refresh, and I observe it well. But it rather Firefox's issue than Svelte's