0

I'm using react-native-image-crop-picker (v0.34.1) to select a slo-mo video from an iPhone.

After selecting the video, I am playing the video using react-native-video (v5.0.2).

The slo-mo effects of the video are not reflected in the playback of the video. I can't find any information about how to achieve this. Can anyone point me in the right direction?

Thanks

jsinek
  • 1
  • 1
  • What happens when you manipulate the [rate](https://github.com/react-native-community/react-native-video#rate) prop? – Adam Jenkins Sep 11 '20 at 22:36
  • The rate prop will slow down the entire video, however, the slo-mo videos iOS creates allows for small segments of the video to play at a slower rate so it's not quite what I'm looking for. – jsinek Sep 11 '20 at 22:42
  • But can't you use the prop to fake it yourself? iOS slows down, I dunno, I'm guessing the middle 80% of the slow-mo video. So when you hit 10% of the progress, change the rate prop to, let's say 0.2, then when you hit 90% of the progress, change the rate prop back to 1. – Adam Jenkins Sep 11 '20 at 22:43
  • I have considered that and tried to track down the data that determines which segments of the video are playing at a different rate but that data doesn't seem to be exposed. Or at least I haven't found a way to retrieve it yet. – jsinek Sep 11 '20 at 22:45
  • Maybe check the `canPlaySlowForward` in `onLoad` to see if the user has selected a slow-mo video? You're right, by the way, if the data isn't exposed then it's not exposed, but you can still choose to display the video to the user however you want and if you are choosing to display it in slow-mo, then you can use rate. – Adam Jenkins Sep 11 '20 at 22:53

2 Answers2

0

Like I said, you'll have to play with it to acheive the effect you want.

Try it:

const [rate,setRate] = useState(1);
const durationRef = useRef();
const checkCurrentTime = useCallback(({currentTime}) => {
  const percentagePlayed = currentTime/durationRef.current;
  setRate(percentagePlayed < 0.1 || percentagePlayed > 0.9 ? 1 : 0.2)
},[durationRef]);

return (
   <Video
     ...
     rate={rate}
     onLoad(({duration}) => durationRef.current = duration)
     onProgress={checkCurrentTime}
   />
)
Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
0

I have found a solution to this issue in the event that anyone else encounters this.

I have switched from using the react-native-image-crop-picker library to react-native-cameraroll in combination with react-native-convert-ph-asset. This will properly provide the slomo data embedded in the video clip.

jsinek
  • 1
  • 1