Configurable Props

This page shows the list of available properties to configure the player.

Details

adTagUrl

[!WARNING] Deprecated, use source.ad.adTagUrl instead.

Platforms: Android | iOS

Sets the VAST URI to play AVOD ads.

Example:

adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostoptimizedpodbumper&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="

Note: You need to enable IMA SDK in the Gradle or Podfile – see Enable Client-Side Ads Insertion.

allowsExternalPlayback

Platform: iOS

Indicates whether the player allows switching to external playback mode such as AirPlay or HDMI.

• true (default) – Allows switching to external playback mode.
• false – Prevents switching to external playback mode.

audioOutput

Platforms: Android | iOS | visionOS

Changes the audio output.

• speaker (default) – Plays through the speaker.
• earpiece – Plays through the earpiece.

automaticallyWaitsToMinimizeStalling

Platforms: iOS | visionOS

Indicates whether the player should automatically delay playback to minimize stalling. Available for clients linked against iOS 10.0 and later.

• false – Immediately starts playback.
• true (default) – Delays playback to minimize stalling.

bufferConfig

[!WARNING] Deprecated, use source.bufferConfig instead.

Platform: Android

Adjusts the buffer settings. This prop takes an object with one or more of the following properties:

Live Buffer Configurations

For more details on Android live streaming, see ExoPlayer Live Streaming (opens in a new tab).

Example with Default Values

bufferConfig={{
  minBufferMs: 15000,
  maxBufferMs: 50000,
  bufferForPlaybackMs: 2500,
  bufferForPlaybackAfterRebufferMs: 5000,
  backBufferDurationMs: 120000,
  cacheSizeMB: 0,
  live: {
      targetOffsetMs: 500,
  },
}}

Note: The Android cache is global and shared among all components. The first cacheSizeMB value set persists throughout the app lifecycle.

bufferingStrategy

Platform: Android

Configures the buffering and data loading strategy.

• Default (default) – Uses ExoPlayer's default loading strategy.
• DisableBuffering – Prevents buffering beyond the immediate need. Use with caution, as this may stop playback.
• DependingOnMemory – Uses ExoPlayer’s default strategy but stops buffering and triggers garbage collection when memory is low.

chapters

Platform: tvOS

Provides a custom chapter source for tvOS. This prop takes an array of objects with the following properties:

currentPlaybackTime

Platforms: Android | iOS

When playing an HLS live stream with an EXT-X-PROGRAM-DATE-TIME tag, this property contains the epoch value in milliseconds.

controls

Platforms: Android | iOS | visionOS | web

Determines whether player controls are shown.

• false (default) – Hides player controls.
• true – Displays player controls.

Controls are always visible in fullscreen mode, even if controls={false}. To add custom controls, use packages like:

• react-native-video-controls (opens in a new tab)
• react-native-media-console (opens in a new tab)

See Useful Side Projects.

controlsStyles

Platform: Android

Adjust the control styles. This prop is needed only if controls={true} and is an object. See the supported properties below.

Example with default values:

controlsStyles={{
  hidePosition: false,
  hidePlayPause: false,
  hideForward: false,
  hideRewind: false,
  hideNext: false,
  hidePrevious: false,
  hideFullscreen: false,
  hideSeekBar: false,
  hideDuration: false,
  hideNavigationBarOnFullScreenMode: true,
  hideNotificationBarOnFullScreenMode: true,
  hideSettingButton: true,
  seekIncrementMS: 10000,
  liveLabel: "LIVE"
}}

contentStartTime

[!WARNING] Deprecated, use source.contentStartTime instead.

Platform: Android

Defines the start time in milliseconds for SSAI content. This ensures that video resolutions are loaded at the correct time. Note: This feature only works with DASH streams.

debug

Platform: Android

Enables detailed logging.

[!WARNING] Do not use this in production builds.

Example:

debug={{
  enable: true,
  thread: true,
}}

disableFocus

Platform: Android

Determines whether video audio should override background music/audio on Android.

• false (default) – Overrides background audio/music.
• true – Allows background audio/music from other apps to continue playing.

Note: If true, multiple videos can play simultaneously. If false, starting another video will pause the first one.

disableDisconnectError

Platform: Android

Determines if the player should throw an error when the network connection is lost.

• false (default) – Throws an error when the connection is lost.
• true – The player will keep trying to buffer when the connection is lost.

drm

[!WARNING] Deprecated, use source.drm instead.

Platforms: Android | iOS

To set up DRM, follow this guide.

enterPictureInPictureOnLeave

Platforms: iOS | Android

Determines whether to enter Picture-in-Picture (PiP) mode when the user leaves the app.

• false (default) – Does not enable PiP mode.
• true – Plays media in PiP mode when the user switches apps.

Using this on Android:

• With Expo: Add enableAndroidPictureInPicture to app.json:

  "plugins": [
    [
      "react-native-video",
      {
        "enableAndroidPictureInPicture": true
      }
    ]
  ]

• With Bare React Native: Add PiP support in AndroidManifest.xml:

<activity
  android:name=".MainActivity"
  android:supportsPictureInPicture="true">

Note: Video ads cannot start when using PiP on iOS. More details are available in the Google IMA SDK Docs (opens in a new tab).

filter

Platforms: iOS | visionOS

Applies a video filter.

Notes:

1. Using a filter may increase CPU usage.
2. Saving a filtered video and reloading it is a workaround for performance issues.
3. Filters are not supported on HLS playlists.
4. filterEnabled must be set to true for filters to work.

filterEnabled

Platforms: iOS | visionOS

Enables video filter.

• false (default) – Don't enable filter.
• true – Enable filter.

focusable

Platform: Android

Determines whether this video view should be focusable with a non-touch input device, such as a hardware keyboard.

• false – Makes view unfocusable.
• true (default) – Makes view focusable.

fullscreen

Platforms: Android | iOS | visionOS | web

Controls whether the player enters fullscreen on play.

• false (default) – Don’t display the video in fullscreen.
• true – Display the video in fullscreen.

See presentFullscreenPlayer for details.

fullscreenAutorotate

Platforms: iOS | visionOS

If a preferred fullscreenOrientation is set, this causes the video to rotate to that orientation but permits rotation of the screen to match the user's holding position. Defaults to true.

fullscreenOrientation

Platforms: iOS | visionOS | web

• all (default) – Allows rotation in all orientations.
• landscape – Locks fullscreen to landscape mode.
• portrait – Locks fullscreen to portrait mode.

headers

Platforms: iOS | Android

Passes headers to the HTTP client, which can be used for authorization. Headers must be part of the source object.

Example:

source={{
  uri: "https://www.example.com/video.mp4",
  headers: {
    Authorization: 'Bearer some-token-value',
    'X-Custom-Header': 'some value'
  }
}}

hideShutterView

Platform: Android

Controls whether the ExoPlayer shutter view (black screen while loading) is enabled.

• false (default) – Show shutter view.
• true – Hide shutter view.

ignoreSilentSwitch

Platforms: iOS | visionOS

Controls the iOS silent switch behavior.

• "inherit" (default) – Uses the default AVPlayer behavior.
• "ignore" – Plays audio even if the silent switch is set.
• "obey" – Doesn’t play audio if the silent switch is set.

maxBitRate

Platforms: Android | iOS | visionOS

Sets the desired limit, in bits per second, of network bandwidth consumption when multiple video streams are available for a playlist.

Default: 0 (no limit on maxBitRate).

Example:

maxBitRate={2000000} // 2 megabits

mixWithOthers

Platforms: iOS | visionOS

Controls how audio mixes with other apps.

• "inherit" (default) – Uses the default AVPlayer behavior.
• "mix" – Allows this video’s audio to mix with other apps.
• "duck" – Lowers the volume of other apps while playing this video.

muted

Platforms: All

Controls whether the audio is muted.

• false (default) – Don’t mute audio.
• true – Mute audio.

paused

Platforms: All

Controls whether the media is paused.

• false (default) – Don’t pause the media.
• true – Pause the media.

playInBackground

Platforms: Android | iOS | visionOS

Determines whether the media should continue playing while the app is in the background.

• false (default) – Don’t continue playing the media.
• true – Continue playing the media.

To use this feature on iOS, you must:

• Enable Background Audio (opens in a new tab) in your Xcode project.
• Set the ignoreSilentSwitch prop to "ignore".

playWhenInactive

Platforms: iOS | visionOS

Determines whether the media should continue playing when notifications or the Control Center are in front of the video.

• false (default) – Don’t continue playing the media.
• true – Continue playing the media.

poster

Platforms: All

[!WARNING] Value: string with a URL for the poster is deprecated, use poster as an object instead.

An image to display while the video is loading.

Example:

<Video>
  poster={{
    source: { uri: "https://baconmockup.com/300/200/" },
    resizeMode: "cover",
  }}
</Video>

posterResizeMode

[!WARNING] Deprecated, use poster with resizeMode key instead.

Platforms: All

Determines how to resize the poster image when the frame doesn’t match the raw video dimensions.

• "contain" (default) – Scales the image uniformly to fit within the view.
• "center" – Centers the image in the view without scaling beyond its original size.
• "cover" – Scales the image uniformly, ensuring it fills the view while maintaining aspect ratio.
• "none" – No resizing applied.
• "repeat" – Repeats the image to fill the view (iOS only).
• "stretch" – Stretches width and height independently, potentially distorting the aspect ratio.

preferredForwardBufferDuration

Platforms: iOS | visionOS

Defines how long the player should buffer media ahead of the playhead to prevent playback interruptions.

Default: 0.

Apple Documentation (opens in a new tab)

preventsDisplaySleepDuringVideoPlayback

Platforms: iOS | Android

Determines whether the device screen should remain active while playing a video.

Default: true (prevents the display from sleeping).

progressUpdateInterval

Platforms: All

Sets the delay (in milliseconds) between onProgress events.

Default: 250.0 ms.

rate

Platforms: All

Controls the speed at which the media should play.

• 0.0 – Pauses the video (iOS only).
• 1.0 (default) – Plays at normal speed.
• Other values – Adjusts playback speed (faster/slower).

renderLoader

Platforms: All

Allows you to provide a custom component to display while the video is loading.

If renderLoader is provided, poster and posterResizeMode will be ignored.

renderLoader can be either a component or a function returning a component.

Function Signature

interface ReactVideoRenderLoaderProps {
  source?: ReactVideoSource;
  style?: StyleProp<ImageStyle>;
  resizeMode?: EnumValues<VideoResizeMode>;
}

Example

<Video>
  renderLoader={() => (
    <View>
      <Text>Custom Loader</Text>
    </View>
  )}
</Video>

repeat

Platforms: All

Determines whether to repeat the video when playback reaches the end.

• false (default) – Don’t repeat the video.
• true – Repeat the video.

reportBandwidth

Platform: Android

Determines whether to generate onBandwidthUpdate events. This is necessary due to the high frequency of these events on ExoPlayer.

• false (default) – Don’t generate onBandwidthUpdate events.
• true – Generate onBandwidthUpdate events.

resizeMode

Platforms: Android | iOS | Windows UWP

Determines how to resize the video when the frame doesn’t match the raw video dimensions.

• "none" (default) – No resizing applied.
• "contain" – Scales the video uniformly to fit within the view.
• "cover" – Scales the video uniformly to fill the view while maintaining aspect ratio.
• "stretch" – Stretches width and height independently, which may alter the aspect ratio.

selectedAudioTrack

Platforms: Android | iOS | visionOS

Configures which audio track, if any, is played.

selectedAudioTrack={{
  type: "title",
  value: "Dubbing"
}}

If no matching track is found, the first available track will be played. If multiple tracks match, the first match will be used.

selectedTextTrack

Platforms: Android | iOS | visionOS

Configures which text track (captions or subtitles), if any, is shown.

selectedTextTrack={{
  type: "title",
  value: "English Subtitles"
}}

If no matching track is found, no subtitles will be displayed. If multiple tracks match, the first match will be used.

selectedVideoTrack

Platform: Android

Configures which video track should be played. By default, the player uses Adaptive Bitrate Streaming (ABR) to automatically select the best stream based on available bandwidth.

selectedVideoTrack={{
  type: "resolution",
  value: 480
}}

If no matching track is found, ABR will be used.

shutterColor

Platform: Android

Applies color to the shutter view. If black flashes appear before the video starts, set:

shutterColor = 'transparent';

Default: black.

source

Sets the media source. You can pass an asset loaded via require or an object with a uri.

Setting the source will trigger the player to attempt to load the provided media with all other given props. Ensure all props are provided before or at the same time as setting the source.

Rendering the player component with a null source initializes the player and starts playing once a source value is provided.

Providing a null source value after loading a previous source stops playback and clears out the previous content.

The documentation for this prop is incomplete and will be updated as each option is investigated and tested.

Asset Loaded via require

⚠️ On iOS, file names must not contain spaces. For example, my video.mp4 will not work—use my-video.mp4 instead.

Platforms: Android | iOS | visionOS | Windows UWP

Example:

Pass the asset directly (deprecated):

const sintel = require('./sintel.mp4');
source = { sintel };

Or by using a URI (starting from 6.0.0-beta.6):

const sintel = require('./sintel.mp4');
source={{ uri: sintel }}

URI String

A number of URI schemes are supported by passing an object with a uri attribute.

All URI strings must be URL encoded. For example, 'www.myurl.com/blabla?q=test uri' is invalid, whereas 'www.myurl.com/blabla?q=test%20uri' is valid.

Web Address (http://, https://)

Platforms: All

Example:

source={{ uri: 'https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4' }}

File Path (file://)

Platform: Android

Example:

source={{ uri: 'file:///sdcard/Movies/sintel.mp4' }}

Note: Your app will need permission to read external storage if accessing a file outside your app.

File from Asset Folder (asset://)

Platform: Android

Allows playing a video file from the app's asset folder.

Example:

source={{ uri: 'asset:///sintel.mp4' }}

iPod Library (ipod-library://)

Platform: iOS

Path to a sound file in your iTunes library, typically shared from iTunes to your app.

Example:

source={{ uri: 'ipod-library:///path/to/music.mp3' }}

Note: Using this feature requires adding an entry for NSAppleMusicUsageDescription to your Info.plist file, as described here (opens in a new tab).

Explicit MIME Type for Streams

Provide a type property (mpd/m3u8/ism) inside the source object. This is needed when the URL extension does not match the expected MIME type.

Example (URL extension is .ism for Smooth Streaming, but the file is actually MPEG-DASH (mpd)):

source={{ uri: 'http://host-serving-a-type-different-than-the-extension.ism/manifest(format=mpd-time-csf)',
type: 'mpd' }}

Other Protocols

The following protocols are supported on some platforms but not fully documented yet: content://, ms-appx://, ms-appdata://, assets-library://

Using DRM Content

Platforms: Android | iOS | visionOS | tvOS

To set up DRM, follow this guide.

Example:

{
  description: 'WV: Secure SD & HD (cbcs, MP4, H264)',
  uri: 'https://storage.googleapis.com/wvmedia/cbcs/h264/tears/tears_aes_cbcs.mpd',
  drm: {
    type: DRMType.WIDEVINE,
    licenseServer:
      'https://proxy.uat.widevine.com/proxy?provider=widevine_test',
  },
},

Start Playback at a Specific Point in Time

Platforms: Android | iOS | web

Provide an optional startPosition for video playback. The value is in milliseconds. If the cropStart prop is applied, it will be applied from that point forward. (If it is negative, undefined, or null, it is ignored.)

Playing Only a Portion of the Video (Start & End Time)

Platforms: Android | iOS

Provide an optional cropStart and/or cropEnd for the video. Values are in milliseconds. This is useful when you want to play only a portion of a large video.

Example:

source={{ uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', cropStart: 36012, cropEnd: 48500 }}
 
source={{ uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', cropStart: 36012 }}
 
source={{ uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', cropEnd: 48500 }}

Overriding the Metadata of a Source

Platforms: Android | iOS | tvOS

Provide optional title, subtitle, artist, imageUri, and/or description properties for the video. This is useful when using notification controls on Android or iOS or adapting the tvOS playback experience.

Example:

source={{
    uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
    metadata: {
      title: 'Custom Title',
      subtitle: 'Custom Subtitle',
      artist: 'Custom Artist',
      description: 'Custom Description',
      imageUri: 'https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png'
    }
  }}

ad

Platforms: Android | iOS

Sets the ad configuration.

Example:

ad: {
  adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostoptimizedpodbumper&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="
  adLanguage="fr"
}

See: ads for more information.

Note: You need to enable IMA SDK in the Gradle or Pod file - enable client-side ads insertion.

contentStartTime

Platform: Android

The start time in ms for SSAI content. This determines at what time to load the video info like resolutions. Use this only when you have an SSAI stream where the ad resolution is not the same as the content resolution.

Note: This feature only works on DASH streams.

textTracksAllowChunklessPreparation

Platform: Android

Allow Chunkless Preparation for HLS media sources. See: disabling-chunkless (opens in a new tab) in the Android documentation.

Default value: true.

source={{
    uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
    textTracksAllowChunklessPreparation: false,
  }}

bufferConfig

Platform: Android

Adjust the buffer settings. This prop takes an object with one or more of the properties listed below.

minLoadRetryCount

Platform: Android

Sets the minimum number of times to retry loading data before failing and reporting an error to the application. Useful for recovering from transient internet failures.

Default: 3. Retries 3 times.

Example:

source={{
  uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
  minLoadRetryCount: 5 // Retry 5 times.
}}

textTracks

Platforms: Android | iOS | visionOS

Load one or more "sidecar" text tracks. This takes an array of objects representing each track. Each object should have the format:

⚠️ This feature does not work with HLS playlists (e.g., m3u8) on iOS.

Note: Due to iOS limitations, sidecar text tracks are not compatible with AirPlay. If textTracks are specified, AirPlay support will be automatically disabled.

Example:

import { TextTrackType } from 'react-native-video';
 
textTracks=[
  {
    title: "English CC",
    language: "en",
    type: TextTrackType.VTT, // "text/vtt"
    uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt"
  },
  {
    title: "Spanish Subtitles",
    language: "es",
    type: TextTrackType.SUBRIP, // "application/x-subrip"
    uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt"
  }
]

subtitleStyle

Platforms: Android | iOS

Example:

subtitleStyle={{ paddingBottom: 50, fontSize: 20, opacity: 0 }}

Note for subtitlesFollowVideo

subtitlesFollowVideo helps to determine how the subtitles are positioned. To understand this prop, you need to understand how view management works. The main View style passed to react-native-video is the space reserved to display the video component. It may not match exactly the real video size. For example, you can pass a 4:3 video view and render a 16:9 video inside. So there is a second view, the video view.

Subtitles are managed in a third view.

• When subtitlesFollowVideo is set to true, the subtitle view will adapt to the video view. If the video is displayed out of screen, the subtitles may also be displayed out of screen.
• When subtitlesFollowVideo is set to false, the subtitle view will adapt to the main view. If the video is displayed out of screen, the subtitles may still remain visible within the main view.

This prop can be changed at runtime.

textTracks

[!WARNING] Deprecated, use source.textTracks instead. Changing text tracks will restart playback.

Platforms: Android | iOS | visionOS

Load one or more "sidecar" text tracks. This takes an array of objects representing each track. Each object should have the format:

⚠️ This feature does not work with HLS playlists (e.g., m3u8) on iOS.

On iOS, sidecar text tracks are only supported for individual files, not HLS playlists. For HLS, you should include the text tracks as part of the playlist.

Note: Due to iOS limitations, sidecar text tracks are not compatible with AirPlay. If textTracks are specified, AirPlay support will be automatically disabled.

Example:

import { TextTrackType }, Video from 'react-native-video';
 
textTracks=[
  {
    title: "English CC",
    language: "en",
    type: TextTrackType.VTT, // "text/vtt"
    uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt"
  },
  {
    title: "Spanish Subtitles",
    language: "es",
    type: TextTrackType.SUBRIP, // "application/x-subrip"
    uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt"
  }
]

showNotificationControls

Platforms: Android | iOS | web

Controls whether to show media controls in the notification area. For Android, each Video component will have its own notification controls, whereas on iOS only one notification control will be shown for the last active Video component.

On Android, this will also allow for external controls, Google Assistant session, and other benefits of MediaSession.

You probably also want to set playInBackground to true to keep the video playing when the app is in the background, or playWhenInactive to true to keep the video playing when notifications or the Control Center are in front of the video.

To customize the notification controls, you can use the metadata property in the source prop.

• false (default) - Don't show media controls in the notification area.
• true - Show media controls in the notification area.

To test notification controls on iOS, you need to run the app on a real device, as the simulator does not support it.

For Android, you have to add the following code in your AndroidManifest.xml file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />
    ...
 
    <application>
      ...
      <service
        android:name="com.brentvatne.exoplayer.VideoPlaybackService"
        android:exported="false"
        android:foregroundServiceType="mediaPlayback">
          <intent-filter>
            <action android:name="androidx.media3.session.MediaSessionService" />
          </intent-filter>
      </service>
    </application>
</manifest>

useSecureView

[!WARNING] deprecated, use viewType instead

Platform: Android

Force the output to a SurfaceView and enables the secure surface.

This will override useTextureView flag.

SurfaceView is the only one that can be labeled as secure.

• true - Use security
• false (default) - Do not use security

useTextureView

[!WARNING] deprecated, use viewType instead

Platform: Android

Controls whether to output to a TextureView or SurfaceView.

SurfaceView is more efficient and provides better performance but has two limitations:

• It can't be animated, transformed or scaled
• You can't overlay multiple SurfaceViews

useTextureView can only be set at the same time you're setting the source.

• true (default) - Use a TextureView
• false - Use a SurfaceView

viewType

Platform: Android

Allows explicitly specifying the view type. This flag replaces useSecureView and useTextureView fields. There are 3 available values:

• 'textureView': The video is rendered in a texture view. It allows mapping the view on a texture (useful for 3D). DRM playback is not supported on textureView. If the DRM prop is provided, the surface will be transformed into a SurfaceView.
• 'surfaceView' (default): The video is rendered in a surface, taking fewer resources to render.
• 'secureView': The video is rendered in a surface that prevents screenshots from being taken.

volume

Platforms: All

Adjust the volume.

• 1.0 (default) - Play at full volume
• 0.0 - Mute the audio
• Other values - Reduce volume

cmcd

Platform: Android

Configure CMCD (Common Media Client Data) parameters. CMCD is a standard for conveying client-side metrics and capabilities to servers, which can help improve streaming quality and performance.

For detailed information about CMCD, please refer to the CTA-5004 Final Specification (opens in a new tab).

• false (default) - Don't use CMCD
• true - Use default CMCD configuration
• object - Use custom CMCD configuration

When providing an object, you can configure the following properties:

Note: The mode property defaults to CmcdMode.MODE_QUERY_PARAMETER if not specified.

CmcdMode

CmcdMode is an enum that defines how CMCD data should be sent:

• CmcdMode.MODE_REQUEST_HEADER (0) - Send CMCD data in the HTTP request headers.
• CmcdMode.MODE_QUERY_PARAMETER (1) - Send CMCD data as query parameters in the URL.

CmcdData

CmcdData is a type representing custom key-value pairs for CMCD data. It's defined as:

type CmcdData = Record<`${string}-${string}`, string | number>;

Custom key names MUST include a hyphenated prefix to prevent namespace collisions. It's recommended to use a reverse-DNS syntax for custom prefixes.

Example:

<Video
  source={{
    uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
    cmcd: {
      mode: CmcdMode.MODE_QUERY_PARAMETER,
      request: {
        'com-custom-key': 'custom-value'
      },
      session: {
        sid: 'session-id'
      },
      object: {
        br: '3000',
        d: '4000'
      },
      status: {
        rtp: '1200'
      }
    }
  }}
  // or other video props
/>