react-player icon indicating copy to clipboard operation
react-player copied to clipboard

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

Open cduff opened this issue 1 year ago • 3 comments

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 avatar May 29 '24 05:05 cduff

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.

cduff avatar May 30 '24 07:05 cduff

Does the resume (using vimeo play button from a seeked-to progress) work if you don't initially hide the player and don't care about autoplay?

Firsh avatar Aug 10 '24 09:08 Firsh

Does the resume (using vimeo play button from a seeked-to progress) work if you don't initially hide the player and don't care about autoplay?

@Firsh Yes, it does.

cduff avatar Aug 12 '24 00:08 cduff