Muted videos do not autoplay in Safari

[zchlm]

Describe the bug

I have encountered an issue where muted videos do not autoplay in Safari when using Svelte. This behavior differs from Chrome, where the videos autoplay correctly. In a vanilla JavaScript implementation, the autoplay works as expected.

Reproduction

1. Open the Svelte reproduction link in Safari: Svelte Playground
2. Observe that the muted video does not autoplay.
3. Open the following CodePen in Safari: Vanilla CodePen
4. Observe that the muted video autoplays correctly.

Logs

No response

System Info

System:
    OS: macOS 15.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 71.89 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.local/share/mise/installs/node/20/bin/node
    npm: 10.9.0 - ~/.local/share/mise/installs/node/20/bin/npm
    pnpm: 9.12.3 - ~/.local/share/mise/installs/node/20/bin/pnpm
    bun: 1.1.33 - ~/.bun/bin/bun
  Browsers:
    Safari: 18.1
  npmPackages:
    svelte: ^5.1.4 => 5.1.9

Severity

annoyance

[trueadm]

This is yet another browser bug to do with element.cloneNode, using document.importNode seems to work though. :(

[Fd929c2CE5fA]

@trueadm Another way I've tried that works is video.play(), as suggested in the WebKit blog. Maybe worth reference.

Playground-5.1.9

[whalderman]

While not a complete solution to this problem, in cases where the video acts as an animated image (.gif, etc.), the Safari team prefers unintuitively using the img tag in place of the video tag to autoplay the file.