railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update platforms in properties tab (#3562)

Browse Source 
* docs: update platforms in properties tab

* docs: update platforms in drm, events and methods tab
This commit is contained in:
Dominik Danielewicz 2024-03-08 12:48:01 +01:00 committed by GitHub
parent 46c8c498c4
commit 962ca2d195
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 1146 additions and 982 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/pages/component/PlatformsList/PlatformsList.module.css Normal file
View File

@ -0,0 +1,8 @@
.paragraphStyle {
margin-top: 10;
}
.spanStyle {
font-family: 'Orbitron';
font-weight: 800;
}

28
docs/pages/component/PlatformsList/PlatformsList.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from 'react';
import styles from './PlatformsList.module.css';
type Platform =
| 'Android'
| 'iOS'
| 'visionOS'
| 'tvOS'
| 'Windows UWP'
| 'Web'
| 'All';
interface Platforms {
types: Platform[];
}
function PlatformsList({types}: Platforms) {
return (
<p className={styles.paragraphStyle}>
{types.length === 1 && !types.includes('All')
? 'Platform:'
: 'Platforms:'}
<span className={styles.spanStyle}>{' ' + types.join(' | ')}</span>
</p>
);
}
export default PlatformsList;

93
docs/pages/component/drm.md → docs/pages/component/drm.mdx
View File

@ -1,3 +1,5 @@
import PlatformsList from './PlatformsList/PlatformsList.tsx';
# DRM # DRM
> **Note:** DRM is not supported on visionOS yet. > **Note:** DRM is not supported on visionOS yet.
@ -9,37 +11,40 @@ This feature will disable the use of `TextureView` on Android.
DRM object allows this members: DRM object allows this members:
| Property | Type | Default | Platform | Description |
| --- | --- | --- | --- | --- |
| [`type`](#type) | DRMType | undefined | iOS/Android | Specifies which type of DRM you are going to use, DRMType is an enum exposed on the JS module ('fairplay', 'playready', ...) |
| [`licenseServer`](#licenseserver) | string | undefined | iOS/Android | Specifies the license server URL |
| [`headers`](#headers) | Object | undefined | iOS/Android | Specifies the headers send to the license server URL on license acquisition |
| [`contentId`](#contentid) | string | undefined | iOS | Specify the content id of the stream, otherwise it will take the host value from `loadingRequest.request.URL.host` (f.e: `skd://testAsset` -> will take `testAsset`) |
| [`certificateUrl`](#certificateurl) | string | undefined | iOS | Specifies the url to obtain your ios certificate for fairplay, Url to the .cer file |
| [`base64Certificate`](#base64certificate) | bool | false | iOS | Specifies whether or not the certificate returned by the `certificateUrl` is on base64 |
| [`getLicense`](#getlicense)| function | undefined | iOS | Rather than setting the `licenseServer` url to get the license, you can manually get the license on the JS part, and send the result to the native part to configure FairplayDRM for the stream |
### `base64Certificate` ### `base64Certificate`
<PlatformsList types={['iOS']} />
Type: bool\
Default: false
Whether or not the certificate url returns it on base64. Whether or not the certificate url returns it on base64.
Platforms: iOS
### `certificateUrl` ### `certificateUrl`
<PlatformsList types={['iOS']} />
Type: string\
Default: undefined
URL to fetch a valid certificate for FairPlay. URL to fetch a valid certificate for FairPlay.
Platforms: iOS
### `getLicense` ### `getLicense`
`licenseServer` and `headers` will be ignored. You will obtain as argument the `SPC` (as ASCII string, you will probably need to convert it to base 64) obtained from your `contentId` + the provided certificate via <PlatformsList types={['iOS']} />
```objc
[loadingRequest streamingContentKeyRequestDataForApp:certificateData contentIdentifier:contentIdData options:nil error:&spcError]; Type: function\
``` Default: undefined
Rather than setting the `licenseServer` url to get the license, you can manually get the license on the JS part, and send the result to the native part to configure FairplayDRM for the stream
`licenseServer` and `headers` will be ignored. You will obtain as argument the `SPC`
(as ASCII string, you will probably need to convert it to base 64) obtained from
your `contentId` + the provided certificate via `objc [loadingRequest streamingContentKeyRequestDataForApp:certificateData
contentIdentifier:contentIdData options:nil error:&spcError]; `
Also, you will receive the `contentId` and a `licenseUrl` URL defined as `loadingRequest.request.URL.absoluteString ` or as the `licenseServer` prop if it's passed. Also, you will receive the `contentId` and a `licenseUrl` URL defined as `loadingRequest.request.URL.absoluteString ` or as the `licenseServer` prop if it's passed.
You should return on this method a `CKC` in Base64, either by just returning it or returning a `Promise` that resolves with the `CKC`. You should return on this method a `CKC` in Base64, either by just returning it or returning a `Promise` that resolves with the `CKC`.
With this prop you can override the license acquisition flow, as an example: With this prop you can override the license acquisition flow, as an example:
@ -50,24 +55,31 @@ getLicense: (spcString, contentId, licenseUrl) => {
const formData = new FormData(); const formData = new FormData();
formData.append('spc', base64spc); formData.append('spc', base64spc);
return fetch(`https://license.pallycon.com/ri/licenseManager.do`, { return fetch(`https://license.pallycon.com/ri/licenseManager.do`, {
method: 'POST', method: 'POST',
headers: { headers: {
'pallycon-customdata-v2': 'd2VpcmRiYXNlNjRzdHJpbmcgOlAgRGFuaWVsIE1hcmnxbyB3YXMgaGVyZQ==', 'pallycon-customdata-v2':
'Content-Type': 'application/x-www-form-urlencoded', 'd2VpcmRiYXNlNjRzdHJpbmcgOlAgRGFuaWVsIE1hcmnxbyB3YXMgaGVyZQ==',
}, 'Content-Type': 'application/x-www-form-urlencoded',
body: formData },
}).then(response => response.text()).then((response) => { body: formData,
})
.then((response) => response.text())
.then((response) => {
return response; return response;
}).catch((error) => { })
.catch((error) => {
console.error('Error', error); console.error('Error', error);
}); });
} };
``` ```
Platforms: iOS
### `headers` ### `headers`
<PlatformsList types={['Android', 'iOS']} />
Type: Object\
Default: undefined
You can customize headers send to the licenseServer. You can customize headers send to the licenseServer.
Example: Example:
@ -87,14 +99,33 @@ drm={{
### `licenseServer` ### `licenseServer`
<PlatformsList types={['Android', 'iOS']} />
Type: string\
Default: false
The URL pointing to the licenseServer that will provide the authorization to play the protected stream. The URL pointing to the licenseServer that will provide the authorization to play the protected stream.
### `type` ### `type`
<PlatformsList types={['Android', 'iOS']} />
Type: DRMType\
Default: undefined
You can specify the DRM type, either by string or using the exported DRMType enum. You can specify the DRM type, either by string or using the exported DRMType enum.
Valid values are, for Android: DRMType.WIDEVINE / DRMType.PLAYREADY / DRMType.CLEARKEY. Valid values are, for Android: DRMType.WIDEVINE / DRMType.PLAYREADY / DRMType.CLEARKEY.
for iOS: DRMType.FAIRPLAY for iOS: DRMType.FAIRPLAY
### `contentId`
<PlatformsList types={['iOS']} />
Type: string\
Default: undefined
Specify the content id of the stream, otherwise it will take the host value from `loadingRequest.request.URL.host` (f.e: `skd://testAsset` -> will take `testAsset`)
## Common Usage Scenarios ## Common Usage Scenarios
### Send cookies to license server ### Send cookies to license server

565
docs/pages/component/events.md
View File

@ -1,565 +0,0 @@
# Events
This page shows the list of available callbacks to handle player notifications
## List
| Name | Platforms Support |
|-------------------------------------------------------------------------------------------------|---------------------------|
| [onAudioBecomingNoisy](#onaudiobecomingnoisy) | Android, iOS |
| [onAudioFocusChanged](#onaudiofocuschanged) | Android |
| [onAudioTracks](#onaudiotracks) | Android, iOS |
| [onBandwidthUpdate](#onbandwidthupdate) | Android |
| [onBuffer](#onbuffer) | Android, iOS |
| [onEnd](#onend) | All |
| [onError](#onerror) | All |
| [onExternalPlaybackChange](#onexternalplaybackchange) | iOS |
| [onFullscreenPlayerWillPresent](#onfullscreenplayerwillpresent) | Android, iOS, visionOS |
| [onFullscreenPlayerDidPresent](#onfullscreenplayerdidpresent) | Android, iOS, visionOS |
| [onFullscreenPlayerWillDismiss](#onfullscreenplayerwilldismiss) | Android, iOS, visionOS |
| [onFullscreenPlayerDidDismiss](#onfullscreenplayerdiddismiss) | Android, iOS, visionOS |
| [onLoad](#onload) | All |
| [onLoadStart](#onloadstart) | All |
| [onPictureInPictureStatusChanged](#onpictureinpicturestatuschanged) | iOS |
| [onPlaybackRateChange](#onplaybackratechange) | All |
| [onPlaybackStateChanged](#onplaybackstatechanged) | Android, iOS, visionOS |
| [onProgress](#onprogress) | All |
| [onReadyForDisplay](#onreadyfordisplay) | Android, iOS |
| [onReceiveAdEvent](#onreceiveadevent) | Android, iOS |
| [onRestoreUserInterfaceForPictureInPictureStop](#onrestoreuserinterfaceforpictureinpicturestop) | iOS, visionOS |
| [onSeek](#onseek) | All |
| [onTimedMetadata](#ontimedmetadata) | Android, iOS, visionOS |
| [onTextTracks](#ontexttracks) | Android, iOS |
| [onVideoTracks](#onvideotracks) | Android |
| [onVolumeChange](#onvolumechange) | Android, iOS, visionOS |
## Details
### `onAudioBecomingNoisy`
Callback function that is called when the audio is about to become 'noisy' due to a change in audio outputs. Typically this is called when audio output is being switched from an external source like headphones back to the internal speaker. It's a good idea to pause the media when this happens so the speaker doesn't start blasting sound.
Payload: none
Platforms: Android, iOS
### `onAudioFocusChanged`
Callback function that is called when the audio focus changes. This is called when the audio focus is gained or lost. This is useful for determining if the media should be paused or not.
Payload:
Property | Type | Description
--- | --- | ---
hasAudioFocus | boolean | Boolean indicating whether the media has audio focus
Example:
```javascript
{
hasAudioFocus: true
}
```
### `onAudioTracks`
Callback function that is called when audio tracks change
Payload:
An **array** of
Property | Type | Description
--- | --- | ---
index | number | Index number of the track
title | string | Description of the track
language | string | 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) or 3 letter [ISO 639-2](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) language code
type | string | Mime type of track
Example:
```javascript
{
audioTracks: [
{ language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0 },
{ language: 'en', title: 'English', type: 'audio/mpeg', index: 1 }
]
}
```
### `onBandwidthUpdate`
Callback function that is called when the available bandwidth changes.
Payload:
Property | Type | Description
--- | --- | ---
bitrate | number | The estimated bitrate in bits/sec
width | number | The width of the video (android only)
height | number | The height of the video (android only)
trackId | string | The track ID of the video track (android only)
Example on iOS:
```javascript
{
bitrate: 1000000
}
```
Example on Android:
```javascript
{
bitrate: 1000000
width: 1920
height: 1080
trackId: 'some-track-id'
}
```
Note: On Android, you must set the [reportBandwidth](#reportbandwidth) prop to enable this event. This is due to the high volume of events generated.
Platforms: Android
### `onBuffer`
Callback function that is called when the player buffers.
Payload:
Property | Type | Description
--- | --- | ---
isBuffering | boolean | Boolean indicating whether buffering is active
Example:
```javascript
{
isBuffering: true
}
```
Platforms: Android, iOS
### `onEnd`
Callback function that is called when the player reaches the end of the media.
Payload: none
Platforms: all
### `onError`
Callback function that is called when the player experiences a playback error.
Payload:
Property | Type | Description
--- | --- | ---
error | object | Object containing properties with information about the error
Platforms: all
### `onExternalPlaybackChange`
Callback function that is called when external playback mode for current playing video has changed. Mostly useful when connecting/disconnecting to Apple TV – it's called on connection/disconnection.
Payload:
Property | Type | Description
--- | --- | ---
isExternalPlaybackActive | boolean | Boolean indicating whether external playback mode is active
Example:
```javascript
{
isExternalPlaybackActive: true
}
```
Platforms: iOS
### `onFullscreenPlayerWillPresent`
Callback function that is called when the player is about to enter fullscreen mode.
Payload: none
Platforms: Android, iOS
### `onFullscreenPlayerDidPresent`
Callback function that is called when the player has entered fullscreen mode.
Payload: none
Platforms: Android, iOS
### `onFullscreenPlayerWillDismiss`
Callback function that is called when the player is about to exit fullscreen mode.
Payload: none
Platforms: Android, iOS
### `onFullscreenPlayerDidDismiss`
Callback function that is called when the player has exited fullscreen mode.
Payload: none
Platforms: Android, iOS
### `onLoad`
Callback function that is called when the media is loaded and ready to play.
Payload:
Property | Type | Description
--- | --- | ---
currentTime | number | Time in seconds where the media will start
duration | number | Length of the media in seconds
naturalSize | object | Properties:<br> * width - Width in pixels that the video was encoded at<br> * height - Height in pixels that the video was encoded at<br> * orientation - "portrait" or "landscape"
audioTracks | array | An array of audio track info objects with the following properties:<br> * index - Index number<br> * title - Description of the track<br> * language - 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) or 3 letter [ISO639-2](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) language code<br> * type - Mime type of track
textTracks | array | An array of text track info objects with the following properties:<br> * index - Index number<br> * title - Description of the track<br> * language - 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) or 3 letter [ISO 639-2](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) language code<br> * type - Mime type of track
videoTracks | array | An array of video track info objects with the following properties:<br> * trackId - ID for the track<br> * bitrate - Bit rate in bits per second<br> * codecs - Comma separated list of codecs<br> * height - Height of the video<br> * width - Width of the video
Example:
```javascript
{
canPlaySlowForward: true,
canPlayReverse: false,
canPlaySlowReverse: false,
canPlayFastForward: false,
canStepForward: false,
canStepBackward: false,
currentTime: 0,
duration: 5910.208984375,
naturalSize: {
height: 1080
orientation: 'landscape'
width: '1920'
},
audioTracks: [
{ language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0 },
{ language: 'en', title: 'English', type: 'audio/mpeg', index: 1 }
],
textTracks: [
{ title: '#1 French', language: 'fr', index: 0, type: 'text/vtt' },
{ title: '#2 English CC', language: 'en', index: 1, type: 'text/vtt' },
{ title: '#3 English Director Commentary', language: 'en', index: 2, type: 'text/vtt' }
],
videoTracks: [
{ bitrate: 3987904, codecs: "avc1.640028", height: 720, trackId: "f1-v1-x3", width: 1280 },
{ bitrate: 7981888, codecs: "avc1.640028", height: 1080, trackId: "f2-v1-x3", width: 1920 },
{ bitrate: 1994979, codecs: "avc1.4d401f", height: 480, trackId: "f3-v1-x3", width: 848 }
]
}
```
Platforms: all
### `onLoadStart`
Callback function that is called when the media starts loading.
Payload:
Property | Description
--- | ---
isNetwork | boolean | Boolean indicating if the media is being loaded from the network
type | string | Type of the media. Not available on Windows
uri | string | URI for the media source. Not available on Windows
Example:
```javascript
{
isNetwork: true,
type: '',
uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
}
```
Platforms: all
### `onPlaybackStateChanged`
Callback function that is called when the playback state changes.
Payload:
Property | Description
--- | ---
isPlaying | boolean | Boolean indicating if the media is playing or not
Example:
```javascript
{
isPlaying: true,
}
```
Platforms: Android, iOS
### `onPictureInPictureStatusChanged`
Callback function that is called when picture in picture becomes active or inactive.
Property | Type | Description
--- | --- | ---
isActive | boolean | Boolean indicating whether picture in picture is active
Example:
```javascript
{
isActive: true
}
```
Platforms: iOS
### `onPlaybackRateChange`
Callback function that is called when the rate of playback changes - either paused or starts/resumes.
Property | Type | Description
--- | --- | ---
playbackRate | number | 0 when playback is paused, 1 when playing at normal speed. Other values when playback is slowed down or sped up
Example:
```javascript
{
playbackRate: 0, // indicates paused
}
```
Platforms: all
### `onProgress`
Callback function that is called every progressUpdateInterval milliseconds with info about which position the media is currently playing.
Property | Type | Description
--- | --- | ---
currentTime | number | Current position in seconds
playableDuration | number | Position to where the media can be played to using just the buffer in seconds
seekableDuration | number | Position to where the media can be seeked to in seconds. Typically, the total length of the media
Example:
```javascript
{
currentTime: 5.2,
playableDuration: 34.6,
seekableDuration: 888
}
```
Platforms: all
### `onReadyForDisplay`
Callback function that is called when the first video frame is ready for display. This is when the poster is removed.
Payload: none
* iOS: [readyForDisplay](https://developer.apple.com/documentation/avkit/avplayerviewcontroller/1615830-readyfordisplay?language=objc)
* Android [STATE_READY](https://exoplayer.dev/doc/reference/com/google/android/exoplayer2/Player.html#STATE_READY)
Platforms: Android, iOS, Web
### `onReceiveAdEvent`
Callback function that is called when an AdEvent is received from the IMA's SDK.
Enum `AdEvent` possible values for [Android](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/js/google.ima.AdEvent) and [iOS](https://developers.google.com/interactive-media-ads/docs/sdks/ios/client-side/reference/Enums/IMAAdEventType):
<details>
<summary>Events</summary>
| Event | Platform | Description |
|----------------------------|---------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `AD_BREAK_ENDED` | iOS | Fired the first time each ad break ends. Applications must reenable seeking when this occurs (only used for dynamic ad insertion). |
| `AD_BREAK_READY` | Android, iOS | Fires when an ad rule or a VMAP ad break would have played if autoPlayAdBreaks is false. |
| `AD_BREAK_STARTED` | iOS | Fired first time each ad break begins playback. If an ad break is watched subsequent times this will not be fired. Applications must disable seeking when this occurs (only used for dynamic ad insertion). |
| `AD_BUFFERING` | Android | Fires when the ad has stalled playback to buffer. |
| `AD_CAN_PLAY` | Android | Fires when the ad is ready to play without buffering, either at the beginning of the ad or after buffering completes. |
| `AD_METADATA` | Android | Fires when an ads list is loaded. |
| `AD_PERIOD_ENDED` | iOS | Fired every time the stream switches from advertising or slate to content. This will be fired even when an ad is played a second time or when seeking into an ad (only used for dynamic ad insertion). |
| `AD_PERIOD_STARTED` | iOS | Fired every time the stream switches from content to advertising or slate. This will be fired even when an ad is played a second time or when seeking into an ad (only used for dynamic ad insertion). |
| `AD_PROGRESS` | Android | Fires when the ad's current time value changes. The event `data` will be populated with an AdProgressData object. |
| `ALL_ADS_COMPLETED` | Android, iOS | Fires when the ads manager is done playing all the valid ads in the ads response, or when the response doesn't return any valid ads. |
| `CLICK` | Android, iOS | Fires when the ad is clicked. |
| `COMPLETED` | Android, iOS | Fires when the ad completes playing. |
| `CONTENT_PAUSE_REQUESTED` | Android | Fires when content should be paused. This usually happens right before an ad is about to cover the content. |
| `CONTENT_RESUME_REQUESTED` | Android | Fires when content should be resumed. This usually happens when an ad finishes or collapses. |
| `CUEPOINTS_CHANGED` | iOS | Cuepoints changed for VOD stream (only used for dynamic ad insertion). |
| `DURATION_CHANGE` | Android | Fires when the ad's duration changes. |
| `ERROR` | Android, iOS | Fires when an error occurred while loading the ad and prevent it from playing. |
| `FIRST_QUARTILE` | Android, iOS | Fires when the ad playhead crosses first quartile. |
| `IMPRESSION` | Android | Fires when the impression URL has been pinged. |
| `INTERACTION` | Android | Fires when an ad triggers the interaction callback. Ad interactions contain an interaction ID string in the ad data. |
| `LINEAR_CHANGED` | Android | Fires when the displayed ad changes from linear to nonlinear, or the reverse. |
| `LOADED` | Android, iOS | Fires when ad data is available. |
| `LOG` | Android, iOS | Fires when a non-fatal error is encountered. The user need not take any action since the SDK will continue with the same or next ad playback depending on the error situation. |
| `MIDPOINT` | Android, iOS | Fires when the ad playhead crosses midpoint. |
| `PAUSED` | Android, iOS | Fires when the ad is paused. |
| `RESUMED` | Android, iOS | Fires when the ad is resumed. |
| `SKIPPABLE_STATE_CHANGED` | Android | Fires when the displayed ads skippable state is changed. |
| `SKIPPED` | Android, iOS | Fires when the ad is skipped by the user. |
| `STARTED` | Android, iOS | Fires when the ad starts playing. |
| `STREAM_LOADED` | iOS | Stream request has loaded (only used for dynamic ad insertion). |
| `TAPPED` | iOS | Fires when the ad is tapped. |
| `THIRD_QUARTILE` | Android, iOS | Fires when the ad playhead crosses third quartile. |
| `UNKNOWN` | iOS | An unknown event has fired |
| `USER_CLOSE` | Android | Fires when the ad is closed by the user. |
| `VIDEO_CLICKED` | Android | Fires when the non-clickthrough portion of a video ad is clicked. |
| `VIDEO_ICON_CLICKED` | Android | Fires when a user clicks a video icon. |
| `VOLUME_CHANGED` | Android | Fires when the ad volume has changed. |
| `VOLUME_MUTED` | Android | Fires when the ad volume has been muted. |
</details>
Payload:
| Property | Type | Description |
|----------|-------------------------------------|-----------------------|
| event | AdEvent | The ad event received |
| data | Record<string, string> \| undefined | The ad event data |
Example:
```json
{
"data": {
"key": "value"
},
"event": "LOG"
}
```
Platforms: Android, iOS
### `onRestoreUserInterfaceForPictureInPictureStop`
Callback function that corresponds to Apple's [`restoreUserInterfaceForPictureInPictureStopWithCompletionHandler`](https://developer.apple.com/documentation/avkit/avpictureinpicturecontrollerdelegate/1614703-pictureinpicturecontroller?language=objc). Call `restoreUserInterfaceForPictureInPictureStopCompleted` inside of this function when done restoring the user interface.
Payload: none
Platforms: iOS
### `onSeek`
Callback function that is called when a seek completes.
Payload:
Property | Type | Description
--- | --- | ---
currentTime | number | The current time after the seek
seekTime | number | The requested time
Example:
```javascript
{
currentTime: 100.5
seekTime: 100
}
```
Both the currentTime & seekTime are reported because the video player may not seek to the exact requested position in order to improve seek performance.
Platforms: Android, iOS, Windows UWP
### `onTimedMetadata`
Callback function that is called when timed metadata becomes available
Payload:
Property | Type | Description
--- | --- | ---
metadata | array | Array of metadata objects
Example:
```javascript
{
metadata: [
{ value: 'Streaming Encoder', identifier: 'TRSN' },
{ value: 'Internet Stream', identifier: 'TRSO' },
{ value: 'Any Time You Like', identifier: 'TIT2' }
]
}
```
Platforms: Android, iOS
### `onTextTracks`
Callback function that is called when text tracks change
Payload:
Property | Type | Description
--- | --- | ---
index | number | Internal track ID
title | string | Descriptive name for the track
language | string | 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language
type | string | Mime type of the track<br> * TextTrackType.SRT - SubRip (.srt)<br> * TextTrackType.TTML - TTML (.ttml)<br> * TextTrackType.VTT - WebVTT (.vtt)<br>iOS only supports VTT, Android supports all 3
selected | boolean | true if track is playing
Example:
```javascript
{
textTracks: [
{
index: 0,
title: 'Any Time You Like',
type: 'srt',
selected: true
}
]
}
```
### `onTextTrackDataChanged`
Callback function that is called when new subtitle data is available. It provides the actual subtitle content for the current selected text track, if available (mainly WebVTT).
Payload:
Property | Type | Description
--- | --- | ---
`subtitleTracks` | `string` | The subtitles text content in a compatible format.
Example:
```javascript
{
subtitleTracks: "This blade has a dark past.",
}
```
Platforms: iOS
### `onVideoTracks`
Callback function that is called when video tracks change
Payload:
Property | Type | Description
--- | --- | ---
trackId | number | Internal track ID
codecs | string | MimeType of codec used for this track
width | number | Track width
height | number | Track height
bitrate | number | Bitrate in bps
selected | boolean | true if track is selected for playing
Example:
```javascript
{
videoTracks: [
{
trackId: 0,
codecs: 'video/mp4',
width: 1920,
height: 1080,
bitrate: 10000,
selected: true
}
]
}
```
Platforms: Android
### `onVolumeChange`
Callback function that is called when the volume of player changes.
> Note: This event applies to the volume of the player, not the volume of the device.
Payload:
Property | Type | Description
--- | --- | ---
volume | number | The volume of the player (between 0 and 1)
Example:
```javascript
{
volume: 0.5
}
```
Platforms: Android, iOS

591
docs/pages/component/events.mdx Normal file
View File

@ -0,0 +1,591 @@
import PlatformsList from './PlatformsList/PlatformsList.tsx';
# Events
This page shows the list of available callbacks to handle player notifications
## Details
### `onAudioBecomingNoisy`
<PlatformsList types={['Android', 'iOS']} />
Callback function that is called when the audio is about to become 'noisy' due to
a change in audio outputs. Typically this is called when audio output is being switched
from an external source like headphones back to the internal speaker. It's a good
idea to pause the media when this happens so the speaker doesn't start blasting sound.
Payload: none
### `onAudioFocusChanged`
<PlatformsList types={['Android']} />
Callback function that is called when the audio focus changes. This is called when the audio focus is gained or lost. This is useful for determining if the media should be paused or not.
Payload:
Property | Type | Description
--- | --- | ---
hasAudioFocus | boolean | Boolean indicating whether the media has audio focus
Example:
```javascript
{
hasAudioFocus: true;
}
```
### `onAudioTracks`
<PlatformsList types={['Android', 'iOS']} />
Callback function that is called when audio tracks change
Payload:
An **array** of
Property | Type | Description
--- | --- | ---
index | number | Index number of the track
title | string | Description of the track
language | string | 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) or 3 letter [ISO 639-2](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) language code
type | string | Mime type of track
Example:
```javascript
{
audioTracks: [
{language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0},
{language: 'en', title: 'English', type: 'audio/mpeg', index: 1},
];
}
```
### `onBandwidthUpdate`
<PlatformsList types={['Android']} />
Callback function that is called when the available bandwidth changes.
Payload:
| Property | Type | Description |
| -------- | ------ | ---------------------------------------------- |
| bitrate | number | The estimated bitrate in bits/sec |
| width | number | The width of the video (android only) |
| height | number | The height of the video (android only) |
| trackId | string | The track ID of the video track (android only) |
Example on iOS:
```javascript
{
bitrate: 1000000;
}
```
Example on Android:
```javascript
{
bitrate: 1000000;
width: 1920;
height: 1080;
trackId: 'some-track-id';
}
```
Note: On Android, you must set the [reportBandwidth](#reportbandwidth) prop to enable this event. This is due to the high volume of events generated.
### `onBuffer`
<PlatformsList types={['Android', 'iOS']} />
Callback function that is called when the player buffers.
Payload:
| Property | Type | Description |
| ----------- | ------- | ---------------------------------------------- |
| isBuffering | boolean | Boolean indicating whether buffering is active |
Example:
```javascript
{
isBuffering: true;
}
```
### `onEnd`
<PlatformsList types={['All']} />
Callback function that is called when the player reaches the end of the media.
Payload: none
### `onError`
<PlatformsList types={['All']} />
Callback function that is called when the player experiences a playback error.
Payload:
| Property | Type | Description |
| -------- | ------ | ------------------------------------------------------------- |
| error | object | Object containing properties with information about the error |
### `onExternalPlaybackChange`
<PlatformsList types={['iOS']} />
Callback function that is called when external playback mode for current playing video has changed. Mostly useful when connecting/disconnecting to Apple TV – it's called on connection/disconnection.
Payload:
| Property | Type | Description |
| ------------------------ | ------- | ----------------------------------------------------------- |
| isExternalPlaybackActive | boolean | Boolean indicating whether external playback mode is active |
Example:
```javascript
{
isExternalPlaybackActive: true;
}
```
### `onFullscreenPlayerWillPresent`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
Callback function that is called when the player is about to enter fullscreen mode.
Payload: none
### `onFullscreenPlayerDidPresent`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
Callback function that is called when the player has entered fullscreen mode.
Payload: none
### `onFullscreenPlayerWillDismiss`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
Callback function that is called when the player is about to exit fullscreen mode.
Payload: none
### `onFullscreenPlayerDidDismiss`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
Callback function that is called when the player has exited fullscreen mode.
Payload: none
### `onLoad`
<PlatformsList types={['All']} />
Callback function that is called when the media is loaded and ready to play.
Payload:
| Property | Type | Description |
| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| currentTime | number | Time in seconds where the media will start |
| duration | number | Length of the media in seconds |
| naturalSize | object | Properties:<br/> _ width - Width in pixels that the video was encoded at<br/> _ height - Height in pixels that the video was encoded at<br/> \* orientation - "portrait" or "landscape" |
| audioTracks | array | An array of audio track info objects with the following properties:<br/> _ index - Index number<br/> _ title - Description of the track<br/> _ language - 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) or 3 letter [ISO639-2](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) language code<br/> _ type - Mime type of track |
| textTracks | array | An array of text track info objects with the following properties:<br/> _ index - Index number<br/> _ title - Description of the track<br/> _ language - 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) or 3 letter [ISO 639-2](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) language code<br/> _ type - Mime type of track |
| videoTracks | array | An array of video track info objects with the following properties:<br/> _ trackId - ID for the track<br/> _ bitrate - Bit rate in bits per second<br/> _ codecs - Comma separated list of codecs<br/> _ height - Height of the video<br/> \* width - Width of the video |
Example:
```javascript
{
canPlaySlowForward: true,
canPlayReverse: false,
canPlaySlowReverse: false,
canPlayFastForward: false,
canStepForward: false,
canStepBackward: false,
currentTime: 0,
duration: 5910.208984375,
naturalSize: {
height: 1080
orientation: 'landscape'
width: '1920'
},
audioTracks: [
{ language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0 },
{ language: 'en', title: 'English', type: 'audio/mpeg', index: 1 }
],
textTracks: [
{ title: '#1 French', language: 'fr', index: 0, type: 'text/vtt' },
{ title: '#2 English CC', language: 'en', index: 1, type: 'text/vtt' },
{ title: '#3 English Director Commentary', language: 'en', index: 2, type: 'text/vtt' }
],
videoTracks: [
{ bitrate: 3987904, codecs: "avc1.640028", height: 720, trackId: "f1-v1-x3", width: 1280 },
{ bitrate: 7981888, codecs: "avc1.640028", height: 1080, trackId: "f2-v1-x3", width: 1920 },
{ bitrate: 1994979, codecs: "avc1.4d401f", height: 480, trackId: "f3-v1-x3", width: 848 }
]
}
```
### `onLoadStart`
<PlatformsList types={['All']} />
Callback function that is called when the media starts loading.
Payload:
| Property | Description |
| --------- | ----------- | ---------------------------------------------------------------- |
| isNetwork | boolean | Boolean indicating if the media is being loaded from the network |
| type | string | Type of the media. Not available on Windows |
| uri | string | URI for the media source. Not available on Windows |
Example:
```javascript
{
isNetwork: true,
type: '',
uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
}
```
### `onPlaybackStateChanged`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
Callback function that is called when the playback state changes.
Payload:
| Property | Description |
| --------- | ----------- | ------------------------------------------------- |
| isPlaying | boolean | Boolean indicating if the media is playing or not |
Example:
```javascript
{
isPlaying: true,
}
```
### `onPictureInPictureStatusChanged`
<PlatformsList types={['iOS']} />
Callback function that is called when picture in picture becomes active or inactive.
| Property | Type | Description |
| -------- | ------- | ------------------------------------------------------- |
| isActive | boolean | Boolean indicating whether picture in picture is active |
Example:
```javascript
{
isActive: true;
}
```
### `onPlaybackRateChange`
<PlatformsList types={['All']} />
Callback function that is called when the rate of playback changes - either paused or starts/resumes.
| Property | Type | Description |
| ------------ | ------ | --------------------------------------------------------------------------------------------------------------- |
| playbackRate | number | 0 when playback is paused, 1 when playing at normal speed. Other values when playback is slowed down or sped up |
Example:
```javascript
{
playbackRate: 0, // indicates paused
}
```
### `onProgress`
<PlatformsList types={['All']} />
Callback function that is called every progressUpdateInterval milliseconds with info about which position the media is currently playing.
| Property | Type | Description |
| ---------------- | ------ | ------------------------------------------------------------------------------------------------- |
| currentTime | number | Current position in seconds |
| playableDuration | number | Position to where the media can be played to using just the buffer in seconds |
| seekableDuration | number | Position to where the media can be seeked to in seconds. Typically, the total length of the media |
Example:
```javascript
{
currentTime: 5.2,
playableDuration: 34.6,
seekableDuration: 888
}
```
### `onReadyForDisplay`
<PlatformsList types={['Android', 'iOS', 'Web']} />
Callback function that is called when the first video frame is ready for display. This is when the poster is removed.
Payload: none
- iOS: [readyForDisplay](https://developer.apple.com/documentation/avkit/avplayerviewcontroller/1615830-readyfordisplay?language=objc)
- Android [STATE_READY](https://exoplayer.dev/doc/reference/com/google/android/exoplayer2/Player.html#STATE_READY)
### `onReceiveAdEvent`
<PlatformsList types={['Android', 'iOS']} />
Callback function that is called when an AdEvent is received from the IMA's SDK.
Enum `AdEvent` possible values for [Android](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/js/google.ima.AdEvent) and [iOS](https://developers.google.com/interactive-media-ads/docs/sdks/ios/client-side/reference/Enums/IMAAdEventType):
<details>
<summary>Events</summary>
| Event | Platform | Description |
| -------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AD_BREAK_ENDED` | iOS | Fired the first time each ad break ends. Applications must reenable seeking when this occurs (only used for dynamic ad insertion). |
| `AD_BREAK_READY` | Android, iOS | Fires when an ad rule or a VMAP ad break would have played if autoPlayAdBreaks is false. |
| `AD_BREAK_STARTED` | iOS | Fired first time each ad break begins playback. If an ad break is watched subsequent times this will not be fired. Applications must disable seeking when this occurs (only used for dynamic ad insertion). |
| `AD_BUFFERING` | Android | Fires when the ad has stalled playback to buffer. |
| `AD_CAN_PLAY` | Android | Fires when the ad is ready to play without buffering, either at the beginning of the ad or after buffering completes. |
| `AD_METADATA` | Android | Fires when an ads list is loaded. |
| `AD_PERIOD_ENDED` | iOS | Fired every time the stream switches from advertising or slate to content. This will be fired even when an ad is played a second time or when seeking into an ad (only used for dynamic ad insertion). |
| `AD_PERIOD_STARTED` | iOS | Fired every time the stream switches from content to advertising or slate. This will be fired even when an ad is played a second time or when seeking into an ad (only used for dynamic ad insertion). |
| `AD_PROGRESS` | Android | Fires when the ad's current time value changes. The event `data` will be populated with an AdProgressData object. |
| `ALL_ADS_COMPLETED` | Android, iOS | Fires when the ads manager is done playing all the valid ads in the ads response, or when the response doesn't return any valid ads. |
| `CLICK` | Android, iOS | Fires when the ad is clicked. |
| `COMPLETED` | Android, iOS | Fires when the ad completes playing. |
| `CONTENT_PAUSE_REQUESTED` | Android | Fires when content should be paused. This usually happens right before an ad is about to cover the content. |
| `CONTENT_RESUME_REQUESTED` | Android | Fires when content should be resumed. This usually happens when an ad finishes or collapses. |
| `CUEPOINTS_CHANGED` | iOS | Cuepoints changed for VOD stream (only used for dynamic ad insertion). |
| `DURATION_CHANGE` | Android | Fires when the ad's duration changes. |
| `ERROR` | Android, iOS | Fires when an error occurred while loading the ad and prevent it from playing. |
| `FIRST_QUARTILE` | Android, iOS | Fires when the ad playhead crosses first quartile. |
| `IMPRESSION` | Android | Fires when the impression URL has been pinged. |
| `INTERACTION` | Android | Fires when an ad triggers the interaction callback. Ad interactions contain an interaction ID string in the ad data. |
| `LINEAR_CHANGED` | Android | Fires when the displayed ad changes from linear to nonlinear, or the reverse. |
| `LOADED` | Android, iOS | Fires when ad data is available. |
| `LOG` | Android, iOS | Fires when a non-fatal error is encountered. The user need not take any action since the SDK will continue with the same or next ad playback depending on the error situation. |
| `MIDPOINT` | Android, iOS | Fires when the ad playhead crosses midpoint. |
| `PAUSED` | Android, iOS | Fires when the ad is paused. |
| `RESUMED` | Android, iOS | Fires when the ad is resumed. |
| `SKIPPABLE_STATE_CHANGED` | Android | Fires when the displayed ads skippable state is changed. |
| `SKIPPED` | Android, iOS | Fires when the ad is skipped by the user. |
| `STARTED` | Android, iOS | Fires when the ad starts playing. |
| `STREAM_LOADED` | iOS | Stream request has loaded (only used for dynamic ad insertion). |
| `TAPPED` | iOS | Fires when the ad is tapped. |
| `THIRD_QUARTILE` | Android, iOS | Fires when the ad playhead crosses third quartile. |
| `UNKNOWN` | iOS | An unknown event has fired |
| `USER_CLOSE` | Android | Fires when the ad is closed by the user. |
| `VIDEO_CLICKED` | Android | Fires when the non-clickthrough portion of a video ad is clicked. |
| `VIDEO_ICON_CLICKED` | Android | Fires when a user clicks a video icon. |
| `VOLUME_CHANGED` | Android | Fires when the ad volume has changed. |
| `VOLUME_MUTED` | Android | Fires when the ad volume has been muted. |
</details>
Payload:
| Property | Type | Description |
| -------- | ----------------------------------------- | --------------------- |
| event | AdEvent | The ad event received |
| data | Record&lt;string, string&gt; \| undefined | The ad event data |
Example:
```json
{
"data": {
"key": "value"
},
"event": "LOG"
}
```
### `onRestoreUserInterfaceForPictureInPictureStop`
<PlatformsList types={['iOS', 'visionOS']} />
Callback function that corresponds to Apple's [`restoreUserInterfaceForPictureInPictureStopWithCompletionHandler`](https://developer.apple.com/documentation/avkit/avpictureinpicturecontrollerdelegate/1614703-pictureinpicturecontroller?language=objc). Call `restoreUserInterfaceForPictureInPictureStopCompleted` inside of this function when done restoring the user interface.
Payload: none
### `onSeek`
<PlatformsList types={['Android', 'iOS', 'Windows UWP']} />
Callback function that is called when a seek completes.
Payload:
| Property | Type | Description |
| ----------- | ------ | ------------------------------- |
| currentTime | number | The current time after the seek |
| seekTime | number | The requested time |
Example:
```javascript
{
currentTime: 100.5;
seekTime: 100;
}
```
Both the currentTime & seekTime are reported because the video player may not seek to the exact requested position in order to improve seek performance.
### `onTimedMetadata`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
Callback function that is called when timed metadata becomes available
Payload:
| Property | Type | Description |
| -------- | ----- | ------------------------- |
| metadata | array | Array of metadata objects |
Example:
```javascript
{
metadata: [
{value: 'Streaming Encoder', identifier: 'TRSN'},
{value: 'Internet Stream', identifier: 'TRSO'},
{value: 'Any Time You Like', identifier: 'TIT2'},
];
}
```
### `onTextTracks`
<PlatformsList types={['Android', 'iOS']} />
Callback function that is called when text tracks change
Payload:
| Property | Type | Description |
| -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| index | number | Internal track ID |
| title | string | Descriptive name for the track |
| language | string | 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language |
| type | string | Mime type of the track<br/> _ TextTrackType.SRT - SubRip (.srt)<br/> _ TextTrackType.TTML - TTML (.ttml)<br/> \* TextTrackType.VTT - WebVTT (.vtt)<br/>iOS only supports VTT, Android supports all 3 |
| selected | boolean | true if track is playing |
Example:
```javascript
{
textTracks: [
{
index: 0,
title: 'Any Time You Like',
type: 'srt',
selected: true,
},
];
}
```
### `onTextTrackDataChanged`
<PlatformsList types={['iOS']} />
Callback function that is called when new subtitle data is available. It provides the actual subtitle content for the current selected text track, if available (mainly WebVTT).
Payload:
| Property | Type | Description |
| ---------------- | -------- | -------------------------------------------------- |
| `subtitleTracks` | `string` | The subtitles text content in a compatible format. |
Example:
```javascript
{
subtitleTracks: "This blade has a dark past.",
}
```
### `onVideoTracks`
<PlatformsList types={['Android']} />
Callback function that is called when video tracks change
Payload:
| Property | Type | Description |
| -------- | ------- | ------------------------------------- |
| trackId | number | Internal track ID |
| codecs | string | MimeType of codec used for this track |
| width | number | Track width |
| height | number | Track height |
| bitrate | number | Bitrate in bps |
| selected | boolean | true if track is selected for playing |
Example:
```javascript
{
videoTracks: [
{
trackId: 0,
codecs: 'video/mp4',
width: 1920,
height: 1080,
bitrate: 10000,
selected: true,
},
];
}
```
### `onVolumeChange`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
Callback function that is called when the volume of player changes.
> Note: This event applies to the volume of the player, not the volume of the device.
Payload:
| Property | Type | Description |
| -------- | ------ | ------------------------------------------ |
| volume | number | The volume of the player (between 0 and 1) |
Example:
```javascript
{
volume: 0.5;
}
```

111
docs/pages/component/methods.md → docs/pages/component/methods.mdx
View File

@ -1,26 +1,21 @@
import PlatformsList from './PlatformsList/PlatformsList.tsx';
# Methods # Methods
This page shows the list of available methods This page shows the list of available methods
## Component methods
| Name |Platforms Support |
|-------------------------------------------------------------------------------------------|-----------------------|
|[dismissFullscreenPlayer](#dismissfullscreenplayer) |Android, iOS |
|[presentFullscreenPlayer](#presentfullscreenplayer) |Android, iOS |
|[pause](#pause) |Android, iOS |
|[resume](#resume) |Android, iOS |
|[save](#save) |iOS |
|[restoreUserInterfaceForPictureInPictureStop](#restoreuserinterfaceforpictureinpicturestop)|iOS |
|[seek](#seek) |All |
### `dismissFullscreenPlayer` ### `dismissFullscreenPlayer`
<PlatformsList types={['Android', 'iOS']} />
`dismissFullscreenPlayer(): Promise<void>` `dismissFullscreenPlayer(): Promise<void>`
Take the player out of fullscreen mode. Take the player out of fullscreen mode.
Platforms: Android, iOS
### `presentFullscreenPlayer` ### `presentFullscreenPlayer`
<PlatformsList types={['Android', 'iOS']} />
`presentFullscreenPlayer(): Promise<void>` `presentFullscreenPlayer(): Promise<void>`
Put the player in fullscreen mode. Put the player in fullscreen mode.
@ -29,82 +24,81 @@ On iOS, this displays the video in a fullscreen view controller with controls.
On Android, this puts the navigation controls in fullscreen mode. It is not a complete fullscreen implementation, so you will still need to apply a style that makes the width and height match your screen dimensions to get a fullscreen video. On Android, this puts the navigation controls in fullscreen mode. It is not a complete fullscreen implementation, so you will still need to apply a style that makes the width and height match your screen dimensions to get a fullscreen video.
Platforms: Android, iOS
### `pause` ### `pause`
<PlatformsList types={['Android', 'iOS']} />
`pause(): Promise<void>` `pause(): Promise<void>`
Pause the video. Pause the video.
Platforms: Android, iOS
### `resume` ### `resume`
<PlatformsList types={['Android', 'iOS']} />
`resume(): Promise<void>` `resume(): Promise<void>`
Resume the video. Resume the video.
Platforms: Android, iOS
### `save` ### `save`
<PlatformsList types={['iOS']} />
`save(): Promise<{ uri: string }>` `save(): Promise<{ uri: string }>`
Save video to your Photos with current filter prop. Returns promise. Save video to your Photos with current filter prop. Returns promise.
Notes: Notes:
- Currently only supports highest quality export
- Currently only supports MP4 export
- Currently only supports exporting to user's cache directory with a generated UUID filename.
- User will need to remove the saved video through their Photos app
- Works with cached videos as well. (Checkout video-caching example)
- If the video is has not began buffering (e.g. there is no internet connection) then the save function will throw an error.
- If the video is buffering then the save function promise will return after the video has finished buffering and processing.
Future: - Currently only supports highest quality export
- Will support multiple qualities through options - Currently only supports MP4 export
- Will support more formats in the future through options - Currently only supports exporting to user's cache directory with a generated UUID filename.
- Will support custom directory and file name through options - User will need to remove the saved video through their Photos app
- Works with cached videos as well. (Checkout video-caching example)
- If the video is has not began buffering (e.g. there is no internet connection) then the save function will throw an error.
- If the video is buffering then the save function promise will return after the video has finished buffering and processing.
Platforms: iOS Future:
- Will support multiple qualities through options
- Will support more formats in the future through options
- Will support custom directory and file name through options
### `restoreUserInterfaceForPictureInPictureStopCompleted` ### `restoreUserInterfaceForPictureInPictureStopCompleted`
<PlatformsList types={['iOS']} />
`restoreUserInterfaceForPictureInPictureStopCompleted(restored)` `restoreUserInterfaceForPictureInPictureStopCompleted(restored)`
This function corresponds to the completion handler in Apple's [restoreUserInterfaceForPictureInPictureStop](https://developer.apple.com/documentation/avkit/avpictureinpicturecontrollerdelegate/1614703-pictureinpicturecontroller?language=objc). IMPORTANT: This function must be called after `onRestoreUserInterfaceForPictureInPictureStop` is called. This function corresponds to the completion handler in Apple's [restoreUserInterfaceForPictureInPictureStop](https://developer.apple.com/documentation/avkit/avpictureinpicturecontrollerdelegate/1614703-pictureinpicturecontroller?language=objc). IMPORTANT: This function must be called after `onRestoreUserInterfaceForPictureInPictureStop` is called.
Platforms: iOS
### `seek` ### `seek`
<PlatformsList types={['All']} />
`seek(seconds)` `seek(seconds)`
Seek to the specified position represented by seconds. seconds is a float value. Seek to the specified position represented by seconds. seconds is a float value.
`seek()` can only be called after the `onLoad` event has fired. Once completed, the [onSeek](#onseek) event will be called. `seek()` can only be called after the `onLoad` event has fired. Once completed, the [onSeek](#onseek) event will be called.
Platforms: all
#### Exact seek #### Exact seek
<PlatformsList types={['iOS']} />
By default iOS seeks within 100 milliseconds of the target position. If you need more accuracy, you can use the seek with tolerance method: By default iOS seeks within 100 milliseconds of the target position. If you need more accuracy, you can use the seek with tolerance method:
`seek(seconds, tolerance)` `seek(seconds, tolerance)`
tolerance is the max distance in milliseconds from the seconds position that's allowed. Using a more exact tolerance can cause seeks to take longer. If you want to seek exactly, set tolerance to 0. tolerance is the max distance in milliseconds from the seconds position that's allowed. Using a more exact tolerance can cause seeks to take longer. If you want to seek exactly, set tolerance to 0.
Platforms: iOS
### Example Usage ### Example Usage
```tsx ```tsx
const videoRef = useRef<VideoRef>(null); const videoRef = useRef<VideoRef>(null);
const someCoolFunctions = async () => { const someCoolFunctions = async () => {
if(!videoRef.current) { if (!videoRef.current) {
return; return;
} }
@ -129,7 +123,7 @@ const someCoolFunctions = async () => {
return ( return (
<Video <Video
ref={videoRef} ref={videoRef}
source={{ uri: 'https://www.w3schools.com/html/mov_bbb.mp4' }} source={{uri: 'https://www.w3schools.com/html/mov_bbb.mp4'}}
/> />
); );
``` ```
@ -137,34 +131,41 @@ return (
## Static methods ## Static methods
### `getWidevineLevel` ### `getWidevineLevel`
<PlatformsList types={['Android']} />
Indicates whether the widevine level supported by device. Indicates whether the widevine level supported by device.
Possible values are: Possible values are:
- 0 - unable to determine widevine support (typically not supported)
- 1, 2, 3 - Widevine level supported
Platform: Android - 0 - unable to determine widevine support (typically not supported)
- 1, 2, 3 - Widevine level supported
### `isCodecSupported` ### `isCodecSupported`
Indicates whether the provided codec is supported level supported by device. Indicates whether the provided codec is supported level supported by device.
parameters: parameters:
- `mimetype`: mime type of codec to query - `mimetype`: mime type of codec to query
- `width`, `height`: resolution to query - `width`, `height`: resolution to query
Possible results: Possible results:
- `hardware` - codec is supported by hardware - `hardware` - codec is supported by hardware
- `software` - codec is supported by software only - `software` - codec is supported by software only
- `unsupported` - codec is not supported - `unsupported` - codec is not supported
Platform: Android <PlatformsList types={['Android']} />
### `isHEVCSupported` ### `isHEVCSupported`
Helper which Indicates whether the provided HEVC/1920*1080 is supported level supported by device. It uses isCodecSupported internally.
Platform: Android Helper which Indicates whether the provided HEVC/1920\*1080 is supported level supported by device. It uses isCodecSupported internally.
<PlatformsList types={['Android']} />
### Example Usage ### Example Usage
```tsx ```tsx
import { VideoDecoderProperties } from 'react-native-video'; import { VideoDecoderProperties } from 'react-native-video';
@ -179,4 +180,4 @@ VideoDecoderProperties.isCodecSupported('video/hevc', 1920, 1080).then((support)
VideoDecoderProperties.isHEVCSupported().then((support) => { VideoDecoderProperties.isHEVCSupported().then((support) => {
... ...
}); });
``` ```

698
docs/pages/component/props.md → docs/pages/component/props.mdx
View File

File diff suppressed because it is too large Load Diff

6
docs/theme.config.jsx
View File

@ -26,6 +26,12 @@ export default {
content="https://react-native-video.github.io/react-native-video/thumbnail.jpg" content="https://react-native-video.github.io/react-native-video/thumbnail.jpg"
/> />
<meta name="twitter:image:alt" content="React Native Video" /> <meta name="twitter:image:alt" content="React Native Video" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
<link
href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap"
rel="stylesheet"
/>
</> </>
), ),
logo: ( logo: (

28
docs/tsconfig.json Normal file
View File

@ -0,0 +1,28 @@
{
"compilerOptions": {
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}