feat: add playback speed as a configurable parameter in video player (#28)

* feat: add playback speed as a configurable parameter in video player

* fix: update text color and reset speed button title in VideoPlayerExample

Author: sheunglaili

android/cpp/VideoPlayer.cpp

@@ -70,6 +70,18 @@ void VideoPlayer::setIsLooping(jboolean isLooping) {
   setIsLoopingMethod(self(), isLooping);
 }
 
+jfloat VideoPlayer::getPlaybackSpeed() {
+  static const auto getPlaybackSpeedMethod =
+      getClass()->getMethod<jfloat()>("getPlaybackSpeed");
+  return getPlaybackSpeedMethod(self());
+}
+
+void VideoPlayer::setPlaybackSpeed(jfloat playbackSpeed) {
+  static const auto setPlaybackSpeedMethod =
+      getClass()->getMethod<void(jfloat)>("setPlaybackSpeed");
+  setPlaybackSpeedMethod(self(), playbackSpeed);
+}
+
 local_ref<VideoFrame> VideoPlayer::decodeNextFrame() {
   static const auto decodeNextFrameMethod =
       getClass()->getMethod<VideoFrame()>("decodeNextFrame");

android/cpp/VideoPlayer.h

@@ -41,6 +41,10 @@ struct VideoPlayer : public jni::JavaClass<VideoPlayer> {
 
   void setIsLooping(jboolean isLooping);
 
+  jfloat getPlaybackSpeed();
+
+  void setPlaybackSpeed(jfloat playbackSpeed);
+
   local_ref<VideoFrame> decodeNextFrame();
 
   void release();

android/cpp/VideoPlayerHostObject.cpp

@@ -26,6 +26,7 @@ VideoPlayerHostObject::getPropertyNames(jsi::Runtime& rt) {
   result.push_back(jsi::PropNameID::forUtf8(rt, std::string("currentTime")));
   result.push_back(jsi::PropNameID::forUtf8(rt, std::string("duration")));
   result.push_back(jsi::PropNameID::forUtf8(rt, std::string("volume")));
+  result.push_back(jsi::PropNameID::forUtf8(rt, std::string("playbackSpeed")));
   result.push_back(jsi::PropNameID::forUtf8(rt, std::string("isLooping")));
   result.push_back(jsi::PropNameID::forUtf8(rt, std::string("isPlaying")));
   result.push_back(jsi::PropNameID::forUtf8(rt, std::string("dispose")));
@@ -97,6 +98,8 @@ jsi::Value VideoPlayerHostObject::get(jsi::Runtime& runtime,
                                       : (double)player->getDuration() / 1000.0);
   } else if (propName == "volume") {
     return jsi::Value(released.test() ? 0 : (double)player->getVolume());
+  } else if (propName == "playbackSpeed") {
+    return jsi::Value(released.test() ? 1 : (double)player->getPlaybackSpeed());
   } else if (propName == "isLooping") {
     return jsi::Value(!(released.test()) && player->getIsLooping());
   } else if (propName == "isPlaying") {
@@ -140,6 +143,8 @@ void VideoPlayerHostObject::set(facebook::jsi::Runtime& runtime,
   }
   if (propName == "volume") {
     player->setVolume(value.asNumber());
+  } else if (propName == "playbackSpeed") {
+    player->setPlaybackSpeed(value.asNumber());
   } else if (propName == "isLooping") {
     player->setIsLooping(value.asBool());
   }

android/src/main/java/com/azzapp/rnskv/VideoPlayer.java

@@ -9,6 +9,7 @@
 import androidx.media3.common.PlaybackException;
 import androidx.media3.common.Player;
 import androidx.media3.common.VideoSize;
+import androidx.media3.common.PlaybackParameters;
 import androidx.media3.common.util.UnstableApi;
 import androidx.media3.exoplayer.ExoPlayer;
 
@@ -28,6 +29,8 @@ public class VideoPlayer {
 
   private float volume = 1f;
 
+  private float playbackSpeed = 1f;
+
   private long duration = 0L;
 
   private long currentPosition = 0L;
@@ -254,6 +257,27 @@ public void setIsLooping(boolean value) {
     mainHandler.post(() -> player.setRepeatMode(value ? Player.REPEAT_MODE_ALL : Player.REPEAT_MODE_OFF));
   }
 
+  /**
+   * @return the playback speed of the video
+   */
+  public float getPlaybackSpeed() {
+    return playbackSpeed;
+  }
+
+  /**
+   * Set the playback speed of the video
+   *
+   * @param value the playback speed to set (must be greater than 0)
+   */
+  public void setPlaybackSpeed(float value) {
+    playbackSpeed = Math.max(0.1f, value); // Minimum speed of 0.1x
+    mainHandler.post(() -> {
+      if (player != null) {
+        player.setPlaybackParameters(new PlaybackParameters(playbackSpeed, 1.0f));
+      }
+    });
+  }
+
   /**
    * Decode the next frame of the video
    *

example/src/VideoPlayerExample.tsx

@@ -5,6 +5,7 @@ import {
   Button,
   PixelRatio,
   Platform,
+  Text,
   View,
   useWindowDimensions,
 } from 'react-native';
@@ -28,11 +29,13 @@ const VideoPlayerExample = () => {
   const [loading, setLoading] = useState(true);
   const [isPlaying, setIsPlaying] = useState(false);
   const [blur, setBlur] = useState(false);
+  const [playbackSpeed, setPlaybackSpeed] = useState(1.0);
 
   const loadRandomVideo = useCallback(() => {
     setLoading(true);
     setVideo(null);
     setLoadedRanges([]);
+    setPlaybackSpeed(1.0);
     pexelsClient.videos
       .popular({ per_page: 1, page: Math.round(Math.random() * 1000) })
       .then(
@@ -101,6 +104,7 @@ const VideoPlayerExample = () => {
     uri: video?.video_files.find((file) => file.quality === 'hd')?.link ?? null,
     autoPlay: true,
     isLooping: true,
+    playbackSpeed,
     onReadyToPlay,
     onPlayingStatusChange,
     onBufferingUpdate,
@@ -209,11 +213,16 @@ const VideoPlayerExample = () => {
           minimumTrackTintColor={'#F00'}
         />
 
-        <Button
-          title={isPlaying ? 'Pause' : 'Play'}
-          onPress={() => (isPlaying ? player?.pause() : player?.play())}
-          disabled={loading}
-        />
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+          <Button
+            title={isPlaying ? 'Pause' : 'Play'}
+            onPress={() => (isPlaying ? player?.pause() : player?.play())}
+            disabled={loading}
+          />
+          <Text style={{ color: '#000', fontSize: 16, fontWeight: '600' }}>
+            Speed: {playbackSpeed}x
+          </Text>
+        </View>
         <Button
           title={'Load Random Video'}
           onPress={loadRandomVideo}
@@ -223,6 +232,30 @@ const VideoPlayerExample = () => {
           title={blur ? 'Unblur' : 'Blur'}
           onPress={() => setBlur((blur) => !blur)}
         />
+        <View
+          style={{
+            flexDirection: 'row',
+            gap: 10,
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          {[0.5, 0.75, 1.0, 1.25, 1.5, 2.0].map((speed) => (
+            <Button
+              key={speed}
+              title={`${speed}x`}
+              onPress={() => setPlaybackSpeed(speed)}
+              color={playbackSpeed === speed ? '#007AFF' : undefined}
+              disabled={loading}
+            />
+          ))}
+        </View>
+        <Button
+          title={`Reset Speed`}
+          onPress={() => setPlaybackSpeed(1.0)}
+          disabled={loading}
+        />
       </View>
     </View>
   );

ios/RNSVVideoPlayer.h

@@ -22,6 +22,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property(nonatomic, readonly) CMTime currentTime;
 @property(nonatomic, readonly) CMTime duration;
 @property(nonatomic) float volume;
+@property(nonatomic) float playbackSpeed;
 @property(nonatomic, readonly) BOOL disposed;
 @property(nonatomic, readonly) BOOL isInitialized;
 @property(nonatomic, readonly) BOOL isPlaying;

ios/RNSVVideoPlayer.mm

@@ -102,6 +102,10 @@ - (void)setVolume:(float)volume {
       (float)((volume < 0.0) ? 0.0 : ((volume > 1.0) ? 1.0 : volume));
 }
 
+- (void)setPlaybackSpeed:(float)playbackSpeed {
+  _player.rate = MAX(0.1f, playbackSpeed);
+}
+
 - (nullable id<MTLTexture>)getNextTextureForTime:(CMTime)time {
   id<MTLTexture> texture = NULL;
   if ([_videoOutput hasNewPixelBufferForItemTime:time]) {

ios/VideoPlayerHostObject.mm

@@ -38,6 +38,7 @@
   result.push_back(jsi::PropNameID::forUtf8(rt, std::string("currentTime")));
   result.push_back(jsi::PropNameID::forUtf8(rt, std::string("duration")));
   result.push_back(jsi::PropNameID::forUtf8(rt, std::string("volume")));
+  result.push_back(jsi::PropNameID::forUtf8(rt, std::string("playbackSpeed")));
   result.push_back(jsi::PropNameID::forUtf8(rt, std::string("isLooping")));
   result.push_back(jsi::PropNameID::forUtf8(rt, std::string("isPlaying")));
   result.push_back(jsi::PropNameID::forUtf8(rt, std::string("dispose")));
@@ -146,6 +147,12 @@
     }
     float volume = player.volume;
     return jsi::Value(volume);
+  } else if (propName == "playbackSpeed") {
+    if (released.test()) {
+      return jsi::Value(1);
+    }
+    float playbackSpeed = player.playbackSpeed;
+    return jsi::Value(playbackSpeed);
   } else if (propName == "isLooping") {
     if (released.test()) {
       return jsi::Value(false);
@@ -170,6 +177,8 @@
   auto propName = propNameId.utf8(runtime);
   if (propName == "volume") {
     player.volume = value.asNumber();
+  } else if (propName == "playbackSpeed") {
+    player.playbackSpeed = value.asNumber();
   } else if (propName == "isLooping") {
     player.isLooping = value.asBool();
   }

src/types.ts

@@ -94,6 +94,11 @@ export type VideoPlayer = {
    * The value should be between 0 and 1.
    */
   volume: number;
+  /**
+   * The playback speed of the video.
+   * The value should be greater than 0. 1.0 is normal speed, 2.0 is double speed, 0.5 is half speed.
+   */
+  playbackSpeed: number;
   /**
    * Disposes of the video player.
    */

src/videoPlayer.ts

@@ -38,6 +38,11 @@ type UseVideoPlayerOptions = {
    * The volume of the video.
    */
   volume?: number;
+  /**
+   * The playback speed of the video.
+   * The value should be greater than 0. 1.0 is normal speed, 2.0 is double speed, 0.5 is half speed.
+   */
+  playbackSpeed?: number;
   /**
    * Callback that is called when the video is ready to play.
    * @param dimensions The dimensions of the video.
@@ -105,6 +110,7 @@ export const useVideoPlayer = ({
   autoPlay = false,
   isLooping = false,
   volume = 1,
+  playbackSpeed = 1,
   onReadyToPlay,
   onBufferingStart,
   onBufferingEnd,
@@ -156,6 +162,12 @@ export const useVideoPlayer = ({
     }
   }, [player, volume]);
 
+  useEffect(() => {
+    if (player) {
+      player.playbackSpeed = playbackSpeed;
+    }
+  }, [player, playbackSpeed]);
+
   useEventListener(player, 'ready', onReadyToPlay);
   useEventListener(player, 'bufferingStart', onBufferingStart);
   useEventListener(player, 'bufferingEnd', onBufferingEnd);