cookpete / react-player

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
https://cookpete.github.io/react-player
MIT License
9.39k stars 1.15k forks source link

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

Open cduff opened 5 months ago

cduff commented 5 months ago

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:

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 commented 5 months ago

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.

Firsh commented 2 months ago

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?

cduff commented 2 months ago

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.