Ability to play video and pause at exact point in video time

[pacman899]

Feature Request

Ability to play video and then stop at exact point in time

Why it is needed

needed for functionality that stops at pre defined points in time of the video and do something. I did not find a way to stop exactly at pre-given time.

using a state of the pause prop is not good enough, because it stops a bit after the wanted time, its nondeterministic, and workarounds creates bad user xp (if I correct with seek after the pause, it creates a video jump back few frames).

currently, the only way to stop at exact point in time of the video is with seek function. and not possible to play up to that point.

Possible implementation

I do not have xp with the native implementations, but the simplest thing I can think of from the Component api side is adding pauseAt property, and onPause callback.

<Video>
  ...
  pauseAt={12.34}
  onPause={ onPauseData => assert( onPauseData.currentTime === 12.34)  }
  ...
</Video>

and then when the video plays, the native player should stop at the exact point, and fire the onPause. (it could also be called onPauseAt if we don't want to fire this event on regular pause.

another approach for the API could be adding to the seek function another boolean parameter called play -

seek(time: number, tolerance?: number, play: boolean): void;

or just another function -

playSeek(time: number) // (tolarence is not important for me)

[freeboub]

This is a strange requierement I think, and no there is currently no easy way to achieve that.

[pacman899]

I don't think its that strange, but this is my requirement. Think of it like bookmarks you can set in the video. not very common but Youtube has it for instance.

From my understanding the problem here is that when you compare times and set the current pause prop on react thread, it will keep playing up to ~100ms until the video pauses, which means it pauses not in the frame you paused it.

I've looked at Android's code and I dont think its difficult implementation (unless Im wrong with my assumptions...)

we just need to run the check and possibly call pause in the UI thread (where the exoPlayer runs) in ReactExoplayerView::progressHandler need to compare the video curr position time with the new 'stopAt' prop. if the time arrived or passed, pause.

regarding the new onPause callback, I'm still not sure it's really needed. if the video updates the isPause prop when its paussing then you can check it until it changes or something like that.

I'm willing to take the PR (at least for Android at this phase), but I might need some guidance because I never worked on a react native package.

[freeboub]

@pacman899 sorry if I hurt you, that was not my intention.

Anyway, I can help/guide you to to fulfil your requirement ! (but I need to understand it :) )

So you don't want to stop the playback at a fix point, but only pause it ? (Am I right ?) If it is a stop which is required, this is the same feature than: https://github.com/react-native-video/react-native-video/issues/2804 ? The bookmark use case is the possibility to restart a playback from a base point, so I think this is different

But here, use case you describe looks more like following use case: an unsubscribe user will be allowed to play 1 minute of content and then the playback is paused and user is requested to subscribe (here it make sense to pause).

Anyway, technically, Yes, the progressHandler, is a good place to get this behavior, but keep in mind 2 things:

• Polling values is not good... but as exoplayer doesn't such feature, I think this is the only way to acheve it.
• The interval can be changed by app (see progressUpdateInterval property). So you will be 250 ms accurate by default.

Last point, if pause is requested, it would be better to support any array as prop, then you will be able to apply it multiple times pauseAt={[1000, 3000, 5000]} (I am thinking of a use case like Black Mirror: Bandersnatch film)

Thank you.

[pacman899]

1. Its ok man, all good 😎
2. I ment Pause the video, not stop. Sorry for the confusion. Fixed the headline.
3. My use case is very similar to the Black Mirror: Bandersnatch film. Play a video, pause exactly at predefined frame time, do something (callback) , continue playing up to next pause point, then pause, do something, and so on. The difference in my case - there is no branching of the video like the movie, so it is simpler.
4. I agree with the array of pause points, it's more convenient.
5. is there a Discord/Gitter/Slack channel here ?

[freeboub]

I can invite you on a slack channel, send me your mail. (I am not always connected on slack) I did some research, maybe clipping the manifest is a good way to proceed: https://stackoverflow.com/questions/52327502/how-to-instruct-exoplayer-to-pause-at-a-certain-position-in-advance I think you should receive onDiscontinuity between each Period ... It needs to be tested...

[freeboub]

@pacman899 finally done...

[AlkanV]

Hello @freeboub, i think this question is similar to my use case so instead of opening new issue, i just wanted to ping you here,

I am trying to make a video trimming component in react native. I have implemented a Trimmer component with react-native-animated. you can see it in action in the following gif:

the next step for me to create an illusion in this UI to give feedback to user in which time interval will be played. This step will reduce video post processing time a lot because real video trimming will be triggered by pressing another button.

So in order for me to create such illusion on UI level, i need to command to react-native-video just to play the video for given intervals and replay the video in auto-loop.

is there anyway for me to achieve this without cropping the video using ffmpeg?

thank you,

best wishes, alkan.

[AndrewBordin]

Hi there, I am implementing a similar feature into one of my own apps as well and was wondering if anyone had made any progress on how I can achieve this. @pacman899 @freeboub