Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iPhone seekTo issue for Vimeo videos with playing={true} #1850

Open
cduff opened this issue May 29, 2024 · 1 comment
Open

iPhone seekTo issue for Vimeo videos with playing={true} #1850

cduff opened this issue May 29, 2024 · 1 comment

Comments

@cduff
Copy link

cduff commented May 29, 2024

Steps to reproduce

  1. Open https://codesandbox.io/p/sandbox/react-player-iphone-seek-issue-ktwh9m
  2. Copy the "Preview" URL.
  3. Open the preview URL on an iPhone, e.g. iPhone 15 Chrome.
  4. Click the "show" button.
  5. Note that react-player renders the Vimeo player and seeks to 50%.
  6. Click the Vimeo player "play" button.
  7. Note that the video plays from the beginning, not from 50% as expected.

More details

I have a React app that uses react-player to play Vimeo videos. It records progress and allows resuming. Where supported by the user device/browser, it auto-plays/resumes the video after the user clicks a button on the page.

I have created the following simple code sandbox to demonstrate. When the user clicks the "show" button, it attempts to resume playing the video from 50% progress.

https://codesandbox.io/p/sandbox/react-player-iphone-seek-issue-ktwh9m

This works well on most devices/browsers but there are issues on iPhones:

  • Video doesn't auto-play. As far as I'm aware, this is a known issue that can't be overcome on iPhones.
  • The video appears to seek to 50%, but then, when the user clicks the Vimeo play button, the video unexpectedly plays from the beginning.

It's this 2nd problem that I'm raising as an issue here. I'm pretty sure this previously worked, so I'm thinking something may have changed in react-player, Vimeo or iPhones to break it.

@cduff
Copy link
Author

cduff commented May 30, 2024

I found a workaround as demonstrated in the following sandbox:

https://codesandbox.io/p/sandbox/react-player-iphone-seek-issue-forked-r2mkkx

It uses playsinline and sets muted for iOS only, as determined using the is-ios npm package.

Auto-play/resume now works on all devices but is initially muted on iOS. I'm not aware of a way to remove this requirement for muting on iOS.

I'll leave this issue open as the behaviour described in my initial post and sandbox is clearly buggy - it seeks to 50% but then plays from the beginning.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant