React Native playing iOS Slo-mo videos

Question

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

Answer 1

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.

Answer 2

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}
   />
)