search

vidstack / player

UI components and hooks for building video/audio players on the web. Robust, customizable, and accessible. Modern alternative to JW Player and Video.js.
https://vidstack.io
MIT License
2.26k stars 133 forks source link

'play' loading strategy fails on iOS Safari #1395

Closed wplit closed 1 month ago

wplit commented 2 months ago

If we set 'play' as the loading strategy, when using the Youtube provider, pressing play on iOS loads the video but then doesn't allow play back.

Also, maybe related or a seperate issue - on desktop Safari, we also have an issue where pressing play needs to be done twice.

edit - it's not unique to Youtube, for Vimeo there's a similar issue with the play loading strategy, on iOS Safari it needs two clicks to play the video. The first click only loads the video but it doesn't actually play until we click again.

Not coming across the same issue with other providers, only when using Youtube & Vimeo.

(i believe it's a relatively new issue, it was working before but I don't recall which versions)

Mat4m0 commented 1 month ago

I have a similar issue in all Browsers (Firefox, Chrome, Safari), using HLS/Dash Provider with Cloudflare Video in a Nuxt Project.

Since the initial page load is pretty high when buffering almost the whole video get loaded, I wanted to use the load="play" property.

When clicking the play button, I get these errors:

image

I have to click again so that the video get started, Please let me know, if I should try to set up a reproduction.

mihar-22 commented 1 month ago

Unfortunately I can't repro either issue from my end using the YouTube provider on iOS Safar 17.6.1. I also can't repro the double play requreiment bug. Closing until we can repro.

wplit commented 1 month ago

@mihar-22

Hopefully this helps,

View with iPhone - https://vidstack.baseui.co/

it's just default vidstack layout, added via web components with Youtube src. One with load=visible and one with load=play. The play one doesn't actually play the video when I try from iOS (same issue if I use vimeo source also, works fine for the others).

(I'm unable to get the Youtube embed loading properly inside stackblitz, jsfiddle, codepen etc so couldn't create a repro there, so added the web components to a wp site just to show it quickly, will add the exact html being added to the page below)

wplit commented 1 month ago

What we see from iOS.. the bottom video has no issue playing, but the top one only loads when clicked - it can't play and gets stuck

https://github.com/user-attachments/assets/ed3aa1d4-9158-49d8-99dc-f6adf7301e65

mihar-22 commented 1 month ago

Need more information. What version are you testing on? What iPhone model? Is it a simulator or real device?

wplit commented 1 month ago

The latest version (1.12.9-next). The above demo is getting vidstack direct from the CDN - https://cdn.vidstack.io/player but it's also happening when I'm installing it all locally and using web components.

I'm on a real device, iPhone SE2. But I can also see the same issue when I try through Lambatest simulating different iPhone versions (iphone 14 & 15 I just tested and saw the same).

The only thing I needed to add to reproduce the issue was the HTML from the docs page and then viewing on an iphone..

This is the only vidstack-related HTML I added to that demo page above..

https://gist.github.com/wplit/0910e72c06dbd9ebbb2cc9bda295894c

wplit commented 1 month ago

@mihar-22 New info..

I've tested back to vidstack 1.12.8 and we see different behaviour with 1.12.8. On first click the video loads, and then on second click the video successfully plays.

This was a previous bug that was fixed, changed in v1.12.9 - "Youtube does not play on first request"

Since 1.12.9, it behaves slightly differently. Now only needing one click to play.

However, if the media player is set to 'load=play' and are on iPhone, the video then becomes unplayable (whereas previous you could play it, but it took two clicks). Now the first click loads the video and the media player instantly gets stuck. (it thinks it's playing, showing the pause icon etc, but the video isn't actually playing in the embed and can't be played no matter how many times it's clicked again)

Two demos showing the difference, from the two versions.. the first media player on each one is the 'play' loading strategy

Old version (v1.12.8) - where it takes two clicks but can be played - https://vidstack.baseui.co/1-12-8/ New version (v1.12.10) - can't be played on iphone no matter how many clicks - https://vidstack.baseui.co/

Let me know how to better provide a repro if the above isn't enough. If youtube embeds worked in stackblitz I could add it in there but it never works.

wplit commented 1 month ago

My workaround, for anybody hitting this issue, is to change the loading strategy dynamically to 'custom' when on iOS detected, (and only if the provider is YT or Vimeo), and then manually load the player on click event with player.startLoading();

it means it takes two clicks to play the video, one to load the iframe, one to play the video. But it's a useful fallback, all other browsers will load on play.