|
|
|
|
@@ -8,6 +8,9 @@ This page shows the list of available properties to configure player
|
|
|
|
|
|
|
|
|
|
### `adTagUrl`
|
|
|
|
|
|
|
|
|
|
> [!WARNING]
|
|
|
|
|
> Deprecated, use source.ad.adTagUrl instead
|
|
|
|
|
|
|
|
|
|
<PlatformsList types={['Android', 'iOS']} />
|
|
|
|
|
|
|
|
|
|
Sets the VAST uri to play AVOD ads.
|
|
|
|
|
@@ -135,8 +138,7 @@ Determines whether to show player controls.
|
|
|
|
|
- **false (default)** - Don't show player controls
|
|
|
|
|
- **true** - Show player controls
|
|
|
|
|
|
|
|
|
|
Note on iOS, controls are always shown when in fullscreen mode.
|
|
|
|
|
Note on Android, native controls are available by default.
|
|
|
|
|
Controls are always shown in fullscreen mode, even when `controls={false}`.
|
|
|
|
|
If needed, you can also add your controls or use a package like [react-native-video-controls](https://github.com/itsnubix/react-native-video-controls) or [react-native-media-console](https://github.com/criszz77/react-native-media-console), see [Useful Side Project](/projects).
|
|
|
|
|
|
|
|
|
|
### `controlsStyles`
|
|
|
|
|
@@ -145,25 +147,53 @@ If needed, you can also add your controls or use a package like [react-native-vi
|
|
|
|
|
|
|
|
|
|
Adjust the control styles. This prop is need only if `controls={true}` and is an object. See the list of prop supported below.
|
|
|
|
|
|
|
|
|
|
| Property | Type | Description |
|
|
|
|
|
|-----------------|---------|-----------------------------------------------------------------------------------------|
|
|
|
|
|
| hideSeekBar | boolean | The default value is `false`, allowing you to hide the seek bar for live broadcasts. |
|
|
|
|
|
| seekIncrementMS | number | The default value is `10000`. You can change the value to increment forward and rewind. |
|
|
|
|
|
| Property | Type | Description |
|
|
|
|
|
|-------------------------------------|---------|---------------------------------------------------------------------------------------------|
|
|
|
|
|
| hidePosition | boolean | Hides the position indicator. Default is `false`. |
|
|
|
|
|
| hidePlayPause | boolean | Hides the play/pause button. Default is `false`. |
|
|
|
|
|
| hideForward | boolean | Hides the forward button. Default is `false`. |
|
|
|
|
|
| hideRewind | boolean | Hides the rewind button. Default is `false`. |
|
|
|
|
|
| hideNext | boolean | Hides the next button. Default is `false`. |
|
|
|
|
|
| hidePrevious | boolean | Hides the previous button. Default is `false`. |
|
|
|
|
|
| hideFullscreen | boolean | Hides the fullscreen button. Default is `false`. |
|
|
|
|
|
| hideSeekBar | boolean | The default value is `false`, allowing you to hide the seek bar for live broadcasts. |
|
|
|
|
|
| hideDuration | boolean | The default value is `false`, allowing you to hide the duration. |
|
|
|
|
|
| hideNavigationBarOnFullScreenMode | boolean | The default value is `true`, allowing you to hide the navigation bar on full-screen mode. |
|
|
|
|
|
| hideNotificationBarOnFullScreenMode | boolean | The default value is `true`, allowing you to hide the notification bar on full-screen mode. |
|
|
|
|
|
| hideSettingButton | boolean | The default value is `true`, allowing you to hide the setting button. |
|
|
|
|
|
| seekIncrementMS | number | The default value is `10000`. You can change the value to increment forward and rewind. |
|
|
|
|
|
| liveLabel | string | Allowing you to set a label for live video. |
|
|
|
|
|
|
|
|
|
|
Example with default values:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
<PlatformsList types={['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 SSAI stream where ads resolution is not the same as content resolution.
|
|
|
|
|
Note: This feature only works on DASH streams
|
|
|
|
|
|
|
|
|
|
### `debug`
|
|
|
|
|
|
|
|
|
|
@@ -330,19 +360,6 @@ Controls the iOS silent switch behavior
|
|
|
|
|
- **"ignore"** - Play audio even if the silent switch is set
|
|
|
|
|
- **"obey"** - Don't play audio if the silent switch is set
|
|
|
|
|
|
|
|
|
|
### `localSourceEncryptionKeyScheme`
|
|
|
|
|
|
|
|
|
|
<PlatformsList types={['iOS']} />
|
|
|
|
|
|
|
|
|
|
Set the url scheme for stream encryption key for local assets
|
|
|
|
|
|
|
|
|
|
Type: String
|
|
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
localSourceEncryptionKeyScheme="my-offline-key"
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### `maxBitRate`
|
|
|
|
|
|
|
|
|
|
@@ -352,6 +369,9 @@ Sets the desired limit, in bits per second, of network bandwidth consumption whe
|
|
|
|
|
|
|
|
|
|
Default: 0. Don't limit the maxBitRate.
|
|
|
|
|
|
|
|
|
|
Note: This property can interact with selectedVideoTrack.
|
|
|
|
|
To use `maxBitrate`, selectedVideoTrack shall be undefined or `{type: SelectedVideoTrackType.AUTO}`.
|
|
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
@@ -437,13 +457,26 @@ Determine whether the media should continue playing when notifications or the Co
|
|
|
|
|
### `poster`
|
|
|
|
|
|
|
|
|
|
<PlatformsList types={['All']} />
|
|
|
|
|
> [!WARNING]
|
|
|
|
|
> Value: string with a URL for the poster is deprecated, use `poster` as object instead
|
|
|
|
|
|
|
|
|
|
An image to display while the video is loading
|
|
|
|
|
|
|
|
|
|
Value: string with a URL for the poster, e.g. "https://baconmockup.com/300/200/"
|
|
|
|
|
Value: Props for the `Image` component. The poster is visible when the source attribute is provided.
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
<Video>
|
|
|
|
|
poster={{
|
|
|
|
|
source: { uri: "https://baconmockup.com/300/200/" },
|
|
|
|
|
resizeMode: "cover",
|
|
|
|
|
// ...
|
|
|
|
|
}}
|
|
|
|
|
</Video>
|
|
|
|
|
````
|
|
|
|
|
|
|
|
|
|
### `posterResizeMode`
|
|
|
|
|
|
|
|
|
|
> [!WARNING]
|
|
|
|
|
> deprecated, use `poster` with `resizeMode` key instead
|
|
|
|
|
<PlatformsList types={['All']} />
|
|
|
|
|
|
|
|
|
|
Determines how to resize the poster image when the frame doesn't match the raw video dimensions.
|
|
|
|
|
@@ -489,6 +522,37 @@ Speed at which the media should play.
|
|
|
|
|
- **1.0** - Play at normal speed (default)
|
|
|
|
|
- **Other values** - Slow down or speed up playback
|
|
|
|
|
|
|
|
|
|
### `renderLoader`
|
|
|
|
|
|
|
|
|
|
<PlatformsList types={['All']} />
|
|
|
|
|
|
|
|
|
|
Allows you to create custom components to display while the video is loading.
|
|
|
|
|
If `renderLoader` is provided, `poster` and `posterResizeMode` will be ignored.
|
|
|
|
|
renderLoader is either a component or a function returning a component.
|
|
|
|
|
It is recommended to use the function for optimization matter.
|
|
|
|
|
|
|
|
|
|
`renderLoader` function be called with parameters of type `ReactVideoRenderLoaderProps` to be able to adapt loader
|
|
|
|
|
|
|
|
|
|
```typescript
|
|
|
|
|
interface ReactVideoRenderLoaderProps {
|
|
|
|
|
source?: ReactVideoSource; /// source of the video
|
|
|
|
|
style?: StyleProp<ImageStyle>; /// style to apply
|
|
|
|
|
resizeMode?: EnumValues<VideoResizeMode>; /// resizeMode provided to the video component
|
|
|
|
|
}
|
|
|
|
|
````
|
|
|
|
|
|
|
|
|
|
Sample:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
<Video>
|
|
|
|
|
renderLoader={() => (
|
|
|
|
|
<View>
|
|
|
|
|
<Text>Custom Loader</Text>
|
|
|
|
|
</View>)
|
|
|
|
|
}
|
|
|
|
|
</Video>
|
|
|
|
|
````
|
|
|
|
|
|
|
|
|
|
### `repeat`
|
|
|
|
|
|
|
|
|
|
<PlatformsList types={['All']} />
|
|
|
|
|
@@ -735,7 +799,7 @@ The following other types are supported on some platforms, but aren't fully docu
|
|
|
|
|
|
|
|
|
|
#### Using DRM content
|
|
|
|
|
|
|
|
|
|
<PlatformsList types={['Android', 'iOS']} />
|
|
|
|
|
<PlatformsList types={['Android', 'iOS', 'visionOS', 'tvOS']} />
|
|
|
|
|
|
|
|
|
|
To setup DRM please follow [this guide](/component/drm)
|
|
|
|
|
|
|
|
|
|
@@ -753,8 +817,6 @@ Example:
|
|
|
|
|
},
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
> ⚠️ DRM is not supported on visionOS yet
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Start playback at a specific point in time
|
|
|
|
|
|
|
|
|
|
@@ -801,6 +863,33 @@ source={{
|
|
|
|
|
}}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### `ad`
|
|
|
|
|
|
|
|
|
|
<PlatformsList types={['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.md] for more informations
|
|
|
|
|
|
|
|
|
|
Note: You need enable IMA SDK in gradle or pod file - [enable client side ads insertion](/installation)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### `contentStartTime`
|
|
|
|
|
|
|
|
|
|
<PlatformsList types={['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 SSAI stream where ads resolution is not the same as content resolution.
|
|
|
|
|
Note: This feature only works on DASH streams
|
|
|
|
|
|
|
|
|
|
#### `textTracksAllowChunklessPreparation`
|
|
|
|
|
<PlatformsList types={['Android']} />
|
|
|
|
|
|
|
|
|
|
@@ -816,37 +905,19 @@ source={{
|
|
|
|
|
}}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### `subtitleStyle`
|
|
|
|
|
|
|
|
|
|
| Property | Description | Platforms |
|
|
|
|
|
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
|
|
|
|
|
| fontSize | Adjust the font size of the subtitles. Default: font size of the device | Android |
|
|
|
|
|
| paddingTop | Adjust the top padding of the subtitles. Default: 0 | Android |
|
|
|
|
|
| paddingBottom | Adjust the bottom padding of the subtitles. Default: 0 | Android |
|
|
|
|
|
| paddingLeft | Adjust the left padding of the subtitles. Default: 0 | Android |
|
|
|
|
|
| paddingRight | Adjust the right padding of the subtitles. Default: 0 | Android |
|
|
|
|
|
| opacity | Adjust the visibility of subtitles with 0 hiding and 1 fully showing them. Android supports float values between 0 and 1 for varying opacity levels, whereas iOS supports only 0 or 1. Default: 1. | Android, iOS |
|
|
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
subtitleStyle={{ paddingBottom: 50, fontSize: 20, opacity: 0 }}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### `textTracks`
|
|
|
|
|
|
|
|
|
|
#### `textTracks`
|
|
|
|
|
<PlatformsList types={['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
|
|
|
|
|
|
|
|
|
|
| Property | Description |
|
|
|
|
|
| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
|
|
| title | Descriptive name for the track |
|
|
|
|
|
| language | 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language |
|
|
|
|
|
| type | Mime type of the track _ TextTrackType.SRT - SubRip (.srt) _ TextTrackType.TTML - TTML (.ttml) \* TextTrackType.VTT - WebVTT (.vtt)iOS only supports VTT, Android supports all 3 |
|
|
|
|
|
| uri | URL for the text track. Currently, only tracks hosted on a webserver are supported |
|
|
|
|
|
| Property | Description |
|
|
|
|
|
|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
|
|
|
| title | Descriptive name for the track |
|
|
|
|
|
| language | 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language |
|
|
|
|
|
| type | Mime type of the track _ TextTrackType.SUBRIP - SubRip (.srt) _ TextTrackType.TTML - TTML (.ttml) \* TextTrackType.VTT - WebVTT (.vtt)iOS only supports VTT, Android supports all 3 |
|
|
|
|
|
| uri | URL for the text track. Currently, only tracks hosted on a webserver are supported |
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
@@ -867,7 +938,92 @@ textTracks={[
|
|
|
|
|
{
|
|
|
|
|
title: "Spanish Subtitles",
|
|
|
|
|
language: "es",
|
|
|
|
|
type: TextTrackType.SRT, // "application/x-subrip"
|
|
|
|
|
type: TextTrackType.SUBRIP, // "application/x-subrip"
|
|
|
|
|
uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt"
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### `subtitleStyle`
|
|
|
|
|
|
|
|
|
|
<PlatformsList types={['Android', 'iOS']} />
|
|
|
|
|
|
|
|
|
|
| Property | Platform | Description | Platforms |
|
|
|
|
|
| ------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
|
|
|
|
|
| fontSize | Android | Adjust the font size of the subtitles. Default: font size of the device | Android |
|
|
|
|
|
| paddingTop | Android | Adjust the top padding of the subtitles. Default: 0 | Android |
|
|
|
|
|
| paddingBottom | Android | Adjust the bottom padding of the subtitles. Default: 0 | Android |
|
|
|
|
|
| paddingLeft | Android | Adjust the left padding of the subtitles. Default: 0 | Android |
|
|
|
|
|
| paddingRight | Android | Adjust the right padding of the subtitles. Default: 0 | Android |
|
|
|
|
|
| opacity | Android, iOS | Adjust the visibility of subtitles with 0 hiding and 1 fully showing them. Android supports float values between 0 and 1 for varying opacity levels, whereas iOS supports only 0 or 1. Default: 1. | Android, iOS |
|
|
|
|
|
| subtitlesFollowVideo | Android | Boolean to adjust position of subtitles. Default: true |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
subtitleStyle={{ paddingBottom: 50, fontSize: 20, opacity: 0 }}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Note for `subtitlesFollowVideo`
|
|
|
|
|
|
|
|
|
|
`subtitlesFollowVideo` helps to determine how the subtitles are positionned.
|
|
|
|
|
To understand this prop you need to understand how views management works.
|
|
|
|
|
The main View style passed to react native video is the position reserved to display the video component.
|
|
|
|
|
It may not match exactly the real video size.
|
|
|
|
|
For exemple, 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.
|
|
|
|
|
|
|
|
|
|
First react-native-video resize the video to keep aspect ratio (depending on `resizeMode` property) and put it in main view.
|
|
|
|
|
|
|
|
|
|
* When putting subtitlesFollowVideo to true, the subtitle view will be adapt to the video view.
|
|
|
|
|
It means that if the video is displayed out of screen, the subtitles may also be displayed out of screen.
|
|
|
|
|
|
|
|
|
|
* When putting subtitlesFollowVideo to false, the subtitle view will keep adapting to the main view.
|
|
|
|
|
It means that if the video is displayed out of screen, the subtitles may also be displayed out of screen.
|
|
|
|
|
|
|
|
|
|
This prop can be changed on runtime.
|
|
|
|
|
|
|
|
|
|
### `textTracks`
|
|
|
|
|
|
|
|
|
|
> [!WARNING]
|
|
|
|
|
> deprecated, use source.textTracks instead. changing text tracks will restart playback
|
|
|
|
|
|
|
|
|
|
<PlatformsList types={['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
|
|
|
|
|
|
|
|
|
|
| Property | Description |
|
|
|
|
|
|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
|
|
|
| title | Descriptive name for the track |
|
|
|
|
|
| language | 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language |
|
|
|
|
|
| type | Mime type of the track _ TextTrackType.SUBRIP - SubRip (.srt) _ TextTrackType.TTML - TTML (.ttml) \* TextTrackType.VTT - WebVTT (.vtt)iOS only supports VTT, Android supports all 3 |
|
|
|
|
|
| uri | URL for the text track. Currently, only tracks hosted on a webserver are supported |
|
|
|
|
|
|
|
|
|
|
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:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
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"
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
@@ -972,3 +1128,68 @@ Adjust the volume.
|
|
|
|
|
- **1.0 (default)** - Play at full volume
|
|
|
|
|
- **0.0** - Mute the audio
|
|
|
|
|
- **Other values** - Reduce volume
|
|
|
|
|
|
|
|
|
|
### `cmcd`
|
|
|
|
|
|
|
|
|
|
<PlatformsList types={['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](https://cdn.cta.tech/cta/media/media/resources/standards/pdfs/cta-5004-final.pdf).
|
|
|
|
|
|
|
|
|
|
- **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:
|
|
|
|
|
|
|
|
|
|
| Property | Type | Description |
|
|
|
|
|
|----------|-------------------------|----------------------------------------------------|
|
|
|
|
|
| `mode` | `CmcdMode` | The mode for sending CMCD data |
|
|
|
|
|
| `request` | `CmcdData` | Custom key-value pairs for the request object |
|
|
|
|
|
| `session` | `CmcdData` | Custom key-value pairs for the session object |
|
|
|
|
|
| `object` | `CmcdData` | Custom key-value pairs for the object metadata |
|
|
|
|
|
| `status` | `CmcdData` | Custom key-value pairs for the status information |
|
|
|
|
|
|
|
|
|
|
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:
|
|
|
|
|
|
|
|
|
|
```typescript
|
|
|
|
|
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:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
<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
|
|
|
|
|
/>
|
|
|
|
|
```
|
|
|
|
|
|
