samvera-labs / ramp

Interactive, IIIF powered audio/video media player React components library. Styleguidist Docs: https://samvera-labs.github.io/ramp/
https://ramp.avalonmediasystem.org/
30 stars 5 forks source link

[BUG] Video content not displaying in iOS native player when clicking full screen, then play #585

Open elynema opened 1 month ago

elynema commented 1 month ago

Describe the bug The iOS native player is not loading video content when the user first clicks the full-screen button on a video to open the native player, then clicks play. Although the progress bar in the native player advances, the media player remains black.

Although there have been intermittent reports of this happening when the user clicks the play button the media item page, it has been primarily reproducible when first clicking the full-screen button.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://avalon-staging.dlib.indiana.edu/media_objects/1z40ks800 on iPhone iOS v17/17.5. This was observed in Safari.
  2. Click on the full-screen button in the bottom right of the media player
  3. The iOS native player will open.
  4. Click on the native player to bring up the controls and then hit the big play button.
  5. The progress bar advances, but not content plays and the player screen remains black.

Expected behavior Playback should work as normal even if the user selects full-screen in the native player prior to starting playback.

Screenshots

https://github.com/user-attachments/assets/c301fa0b-4a61-4728-b832-92c87df7c63f

Smartphone (please complete the following information):

elynema commented 1 month ago

Really hard to debug stuff once the native player opens, so probably hard to figure this out. Could check add tracks event to make sure all source tracks are being added properly into the player on the full-screen event.

Dananji commented 1 month ago

This is likely a regression in the native player in iOS 17 (from reported issues in GitHub issues for JS players, and issues in StackOverflow).

On iOS 16 on Browserstack, and the native player was able to retrieve the data related to the media after entering full-screen, which doesn't seem to be happening in iOS 17 or higher versions. On iOS versions higher than 17, the native player is only able to retrieve the necessary data either after playing the media or entering and then exiting full-screen without playing.

I checked popular streaming sites, and YouTube always play the video on load so, they don't run into this issue.

And in Vimeo, and they hide the full-screen toggle button unless the user has initiated playback in iOS 17 or higher versions to avoid this. iOS 17.5 iOS 16
ios-17 ios-16

Once the video is played in iOS 17.5, the full-screen toggle button appears.

I was not able to trigger player events (mimic what was happening in iOS versions < 17) to get it to a playable after it has entered the native player in full-screen mode, since we don't have control over the native player.

Possible solution paths;

  1. Do something similar to Vimeo for the time being by hiding the full-screen toggle until user hits play
  2. Mark this as a known issue related to iOS 17 and hope it gets fixed in the future without adding more custom code
Dananji commented 3 weeks ago

Added this to the known issues page in Ramp's wiki.