Autoplay doesn't work in Firefox and Safari Mobile Browsers

[shmaltz]

Current Behavior:

I added a media player to my site with autoplay and on desktop it works properly, however on mobile Firefox browser the player loads ads stays loading (with the loading icon) but I cannot play the video even manually. (On iOS Safari mobile the player doesn't load at all, and chrome on Android works properly). I tried tapping into the auto-play and auto-play-fail event listeners, and even though the video fails to play, it still says it succeeded. I understand that some browsers block autoplay with sound, and I was intending to display a "Play" button if auto-play-fail fails, in order to manually start the video.

Expected Behavior:

I expect the video to autoplay properly (or at least auto-play-fail should work).

Steps To Reproduce:

<div class="video-player-outer">
<media-player autoplay load="eager" title="<?php echo $title; ?>" src="youtube/<?php echo $youtube_id; ?>">
  <media-provider>
    <media-poster
      class="vds-poster"
      src="<?php echo $thumbnail; ?>"
    ></media-poster>
  </media-provider>
  <media-video-layout thumbnails="<?php echo $thumbnail; ?>"></media-video-layout>
</media-player>
<button id="fallback-play-button" style="display: none;">Play</button>
</div>

document.addEventListener('DOMContentLoaded', function () {
    const player = document.querySelector('media-player');
    const playButton = document.getElementById('fallback-play-button');

 if (player) {
        player.addEventListener('auto-play', function () {
            playButton.style.display = 'none';
            console.log('autoplay succeeded!');
        });

        player.addEventListener('auto-play-fail', function () {
            playButton.style.display = 'block';
            console.log('autoplay failed!');
        });
    }

    playButton.addEventListener('click', function () {
        player.play();
    });
 }
});

Environment:

• Version: 1.11.22-next
• Framework: Web Components
• PHP/JS
• Device: OnePlus 9
• OS: Android 14
• Browser: Firefox@116

[wplit]

Make sure the player is muted, many browsers won't autoplay unless the video is muted.

Works fine on my end with Safari on iOS, but only if muted.

[shmaltz]

Make sure the player is muted, many browsers won't autoplay unless the video is muted.

Works fine on my end with Safari on iOS, but only if muted.

Thanks @wplit . That did the trick for Firefox on Android, but on Safari iOS the player still doesn't load at all. Too bad I can't see the console for errors because it doesn't seem like I can on iOS.

Also, will the user have to manually unmute every single video now, or does the browser somehow remember that setting? If not, are there any hacks to auto unmute the video once it's playing?

Thank you!