Skip to main content

🎬 Running Videos in Background with VdoCipher in React Native🎶

Background playback allows media to continue playing seamlessly while multitasking or switching apps. This feature ensures that music, podcasts, or videos remain uninterrupted, even when the screen is locked or the app is exited. Starting with version 1.21.0, vdocipher-rn-bridge package offers smooth support for background playback, enabling uninterrupted media enjoyment across various device activities. 🌟

⚙️ Configuring Background Playback in Android​

🎵 Playback Modes​

The vdocipher-rn-bridge package offers three playback modes for Android, each providing a different level of persistence:

The media will immediately pause when the user closes or navigates away from the player screen.

Ideal for applications like e-learning platforms, where it's important for users to stay focused on the content without switching between apps.📚

🛠️ How to Implement?​

1. Add Permission for Media Playback Service​

To enable background playback in Android (for SDK version 34 or higher), add the following permission to your AndroidManifest.xml file, located at android/app/src/main/AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />

    <application
    ..>
    ..
    </application>
</manifest>

This permission is required for media playback to continue in the background.

2. Configure Background Playback​

To set up background playback, configure the playback mode before your VdoPlayerView component is added.

const {VdoPlayerSettings} = NativeModules;

const playerSettings: PlayerSettings = {vdoPlaybackModeAndroid: "continue_playback_on_app_exit"}

useEffect(() => {
    VdoPlayerSettings.applySettings(playerSettings);
  }, []);
Choose the mode that fits your app

Replace continue_playback_on_app_exit in the snippet with the mode that best suits your app's needs:

  • default: Stops playback when the player screen is closed.
  • continue_playback_on_back_press: Continues playback when the app is minimized but stops when fully closed.
  • continue_playback_on_app_exit: Keeps playback running even after the app is closed.

If playback behavior is not set, the player will default to default behavior.

⚙️ Configuring Background Playback in iOS​

🎵 Playback Modes​

The vdocipher-rn-bridge package offers single playback mode for iOS.

The media will immediately pause when the user closes or navigates away from the player screen or presses home.

Ideal for applications like e-learning platforms, where it's important for users to stay focused on the content without switching between apps.📚

🛠️ How to Implement?​

You can enable background mode in iOS by passing true for vdoPlaybackModeiOS when setting VdoPlayerSettings. By default, background mode is desabled in iOS.

const {VdoPlayerSettings} = NativeModules;

const playerSettings: PlayerSettings = {vdoPlaybackModeiOS: true}

useEffect(() => {
    VdoPlayerSettings.applySettings(playerSettings);
  }, []);