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