Autoplay breaks player on iOS

[digilist]

Current Behavior:

Consider this example:

<MediaPlayer title="Sprite Fight"
             src="https://files.vidstack.io/sprite-fight/hls/stream.m3u8"
             autoPlay={true}
             playsInline={true}>
    <MediaProvider />
    <DefaultVideoLayout
        thumbnails="https://files.vidstack.io/sprite-fight/thumbnails.vtt"
        icons={defaultLayoutIcons} />
</MediaPlayer>

The video starts to auto play if there has been any interaction on the site. If there was no interaction (e.g. right after reload), the video does not play automatically, but one can hit the play button.

This works fine in Chrome on my desktop machine, but breaks the player on my iPad in Safari. The player is responsive and you can control it (seek the video, change volume etc.), but the video does not play. It shows the "pause icon" and you can click it, but it does not change to the play icon. It appears like the video is frozen and it is not possible to play the video.

Removing the autoPlay property fixes it, but then there is also no auto play :wink:

Expected Behavior:

The video does not autoplay, but it is possible to hit the play button to play the video.

Steps To Reproduce:

I created a reproduction repo here: https://github.com/digilist/vidstack-autoplay-ios-reproducer

Run npm run dev and access the page with iOS Safari.

Environment:

Example:

• Framework: React
• Device: iPad
• OS: iOS@16.5.1
• Browser: Safari@16.5.1

Anything Else?

This bug does not happen if controls={true} is used (i.e. when default controls are used). In this case the video can be played just as normal.

[mrOrlando]

@digilist try to turn on muted property, there is a note about that in the doc, I faced with the same unexpected behavior

[digilist]

Thank you! Good point. If I remember correctly this actually worked, but I haven't explicitly tested this now. But anyway, I think it's still a bug that it breaks the whole player and does not even allow to play it manually.

[rolandszoke-byborg]

This should be related to an issue I reported in Discord: https://discord.com/channels/742612686679965696/1239917847908716655/1239917847908716655 Rahim is aware of the issue, and he will address it when he is back from parental leave I believe.

[mihar-22]

I have no idea why but Safari seems to incorrectly fire the play and playing events even if it fails. Releasing fix soon.

[shmaltz]

I am having the same issue in Firefox mobile browser with autoplay. Stuck on the loading icon and can't play video.