react-player
react-player copied to clipboard
iPhone `seekTo` issue for Vimeo videos with `playing={true}`
Steps to reproduce
- Open https://codesandbox.io/p/sandbox/react-player-iphone-seek-issue-ktwh9m
- Copy the "Preview" URL.
- Open the preview URL on an iPhone, e.g. iPhone 15 Chrome.
- Click the "show" button.
- Note that
react-playerrenders the Vimeo player and seeks to 50%. - Click the Vimeo player "play" button.
- 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.
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.
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?
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.