From 16a8c35d765e501cff25bbe9117ba5adc261abde Mon Sep 17 00:00:00 2001
From: moskalakamil <91079590+moskalakamil@users.noreply.github.com>
Date: Sat, 14 Dec 2024 15:16:13 +0000
Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20TheWidla?=
=?UTF-8?q?rzGroup/react-native-video@16fa20411f1bc29f274dad710a8acd0f091f?=
=?UTF-8?q?c496=20=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
404.html | 2 +-
.../_buildManifest.js | 2 +-
.../_ssgManifest.js | 0
_next/static/chunks/nextra-data-en-US.json | 2 +-
.../chunks/pages/projects-cae75f51f417125a.js | 1 -
.../chunks/pages/projects-cea3e850f221f643.js | 1 +
component/ads.html | 4 ++--
component/drm.html | 4 ++--
component/events.html | 4 ++--
component/methods.html | 4 ++--
component/props.html | 4 ++--
index.html | 4 ++--
installation.html | 4 ++--
other/caching.html | 4 ++--
other/debug.html | 4 ++--
other/expo.html | 4 ++--
other/misc.html | 4 ++--
other/new-arch.html | 4 ++--
other/plugin.html | 4 ++--
projects.html | 17 +++++++++--------
updating.html | 4 ++--
21 files changed, 41 insertions(+), 40 deletions(-)
rename _next/static/{zxWpxnZzNGiFA55W4kZpo => 7VuwaaePVoiIFB2Tm2Hn7}/_buildManifest.js (96%)
rename _next/static/{zxWpxnZzNGiFA55W4kZpo => 7VuwaaePVoiIFB2Tm2Hn7}/_ssgManifest.js (100%)
delete mode 100644 _next/static/chunks/pages/projects-cae75f51f417125a.js
create mode 100644 _next/static/chunks/pages/projects-cea3e850f221f643.js
diff --git a/404.html b/404.html
index 04ae8c93fa..b9a26140e8 100644
--- a/404.html
+++ b/404.html
@@ -1 +1 @@
-
404: This page could not be found 404
This page could not be found.
\ No newline at end of file
+404: This page could not be found 404
This page could not be found.
\ No newline at end of file
diff --git a/_next/static/zxWpxnZzNGiFA55W4kZpo/_buildManifest.js b/_next/static/7VuwaaePVoiIFB2Tm2Hn7/_buildManifest.js
similarity index 96%
rename from _next/static/zxWpxnZzNGiFA55W4kZpo/_buildManifest.js
rename to _next/static/7VuwaaePVoiIFB2Tm2Hn7/_buildManifest.js
index 5a6fc73de1..0841c5a9b6 100644
--- a/_next/static/zxWpxnZzNGiFA55W4kZpo/_buildManifest.js
+++ b/_next/static/7VuwaaePVoiIFB2Tm2Hn7/_buildManifest.js
@@ -1 +1 @@
-self.__BUILD_MANIFEST=function(e,s){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[e,"static/chunks/pages/index-554692081a2d5fd2.js"],"/_error":["static/chunks/pages/_error-7a92967bea80186d.js"],"/component/ads":[e,"static/chunks/pages/component/ads-1e1fafd11dab9d88.js"],"/component/drm":[e,s,"static/chunks/pages/component/drm-f8c55cc46de3a279.js"],"/component/events":[e,s,"static/chunks/pages/component/events-fa03356d77ae4e2a.js"],"/component/methods":[e,s,"static/chunks/pages/component/methods-8913de1727c8c3a4.js"],"/component/props":[e,s,"static/chunks/pages/component/props-a18ca6a2a406050c.js"],"/installation":[e,"static/chunks/pages/installation-ac5c1dfc1ca39678.js"],"/other/caching":[e,"static/chunks/pages/other/caching-a88a4286e643e1e9.js"],"/other/debug":[e,"static/chunks/pages/other/debug-38ff613b63024781.js"],"/other/expo":[e,"static/chunks/pages/other/expo-5b8d18ab8812e57b.js"],"/other/misc":[e,"static/chunks/pages/other/misc-3d0dc31aca366b18.js"],"/other/new-arch":[e,"static/chunks/pages/other/new-arch-83b38619c8ad8c0c.js"],"/other/plugin":[e,"static/chunks/pages/other/plugin-a355b41f2a074771.js"],"/projects":[e,"static/chunks/pages/projects-cae75f51f417125a.js"],"/updating":[e,"static/chunks/pages/updating-c3d7946eeb6e210c.js"],sortedPages:["/","/_app","/_error","/component/ads","/component/drm","/component/events","/component/methods","/component/props","/installation","/other/caching","/other/debug","/other/expo","/other/misc","/other/new-arch","/other/plugin","/projects","/updating"]}}("static/chunks/673-c9f6925171f8c938.js","static/css/3a975f6040aa70fa.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
\ No newline at end of file
+self.__BUILD_MANIFEST=function(e,s){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[e,"static/chunks/pages/index-554692081a2d5fd2.js"],"/_error":["static/chunks/pages/_error-7a92967bea80186d.js"],"/component/ads":[e,"static/chunks/pages/component/ads-1e1fafd11dab9d88.js"],"/component/drm":[e,s,"static/chunks/pages/component/drm-f8c55cc46de3a279.js"],"/component/events":[e,s,"static/chunks/pages/component/events-fa03356d77ae4e2a.js"],"/component/methods":[e,s,"static/chunks/pages/component/methods-8913de1727c8c3a4.js"],"/component/props":[e,s,"static/chunks/pages/component/props-a18ca6a2a406050c.js"],"/installation":[e,"static/chunks/pages/installation-ac5c1dfc1ca39678.js"],"/other/caching":[e,"static/chunks/pages/other/caching-a88a4286e643e1e9.js"],"/other/debug":[e,"static/chunks/pages/other/debug-38ff613b63024781.js"],"/other/expo":[e,"static/chunks/pages/other/expo-5b8d18ab8812e57b.js"],"/other/misc":[e,"static/chunks/pages/other/misc-3d0dc31aca366b18.js"],"/other/new-arch":[e,"static/chunks/pages/other/new-arch-83b38619c8ad8c0c.js"],"/other/plugin":[e,"static/chunks/pages/other/plugin-a355b41f2a074771.js"],"/projects":[e,"static/chunks/pages/projects-cea3e850f221f643.js"],"/updating":[e,"static/chunks/pages/updating-c3d7946eeb6e210c.js"],sortedPages:["/","/_app","/_error","/component/ads","/component/drm","/component/events","/component/methods","/component/props","/installation","/other/caching","/other/debug","/other/expo","/other/misc","/other/new-arch","/other/plugin","/projects","/updating"]}}("static/chunks/673-c9f6925171f8c938.js","static/css/3a975f6040aa70fa.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
\ No newline at end of file
diff --git a/_next/static/zxWpxnZzNGiFA55W4kZpo/_ssgManifest.js b/_next/static/7VuwaaePVoiIFB2Tm2Hn7/_ssgManifest.js
similarity index 100%
rename from _next/static/zxWpxnZzNGiFA55W4kZpo/_ssgManifest.js
rename to _next/static/7VuwaaePVoiIFB2Tm2Hn7/_ssgManifest.js
diff --git a/_next/static/chunks/nextra-data-en-US.json b/_next/static/chunks/nextra-data-en-US.json
index e862fb9f11..1066ba250b 100644
--- a/_next/static/chunks/nextra-data-en-US.json
+++ b/_next/static/chunks/nextra-data-en-US.json
@@ -1 +1 @@
-{"/component/ads":{"title":"Ads","data":{"ima-sdk#IMA SDK":"react-native-video has built-in support for Google IMA SDK for Android and iOS. To enable it please refer to installation section","usage#Usage":"To use AVOD, you need to pass adTagUrl prop to Video component. adTagUrl is a VAST uri.Example:\nadTagUrl=\"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=\"\nNOTE: Video ads cannot start when you are using the PIP on iOS (more info available at Google IMA SDK Docs). If you are using custom controls, you must hide your PIP button when you receive the STARTED event from onReceiveAdEvent and show it again when you receive the ALL_ADS_COMPLETED event.","events#Events":"To receive events from IMA SDK, you need to pass onReceiveAdEvent prop to Video component. List of events, you can find hereExample:\n...\nonReceiveAdEvent={event => console.log(event)}\n...","localization#Localization":"To change the language of the IMA SDK, you need to pass adLanguage prop to Video component. List of supported languages, you can find hereBy default, ios will use system language and android will use enExample:\n...\nadLanguage=\"fr\"\n..."}},"/component/drm":{"title":"DRM","data":{"drm-example#DRM Example":"We have available example for DRM usage in the example app.\nTo get token needed for DRM playback you can go to our site and get it.","provide-drm-data-only-tested-with-httphttps-assets#Provide DRM data (only tested with http/https assets)":"You can provide some configuration to allow DRM playback.\nThis feature will disable the use of TextureView on Android.DRM object allows this members:","base64certificate#base64Certificate":"Type: bool\nDefault: falseWhether or not the certificate url returns it on base64.","certificateurl#certificateUrl":"Type: string\nDefault: undefinedURL to fetch a valid certificate for FairPlay.","getlicense#getLicense":"Type: function\nDefault: undefinedRather 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 streamlicenseServer and headers will be ignored. You will obtain as argument the SPC\n(as ASCII string, you will probably need to convert it to base 64) obtained from\nyour contentId + the provided certificate via objc [loadingRequest streamingContentKeyRequestDataForApp:certificateData\ncontentIdentifier:contentIdData options:nil error:&spcError]; Also, you will receive following parameter of getLicense:\ncontentId contentId if passed to drm object or loadingRequest.request.url?.host\nloadedLicenseUrl URL defined as loadingRequest.request.URL.absoluteString, this url starts with skd:// or clearkey://\nlicenseServer prop if prop is passed to drm object.\nspcString the SPC used to validate playback with drm server\nYou 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:\ngetLicense: (spcString, contentId, licenseUrl, loadedLicenseUrl) => {\n const base64spc = Base64.encode(spcString);\n const formData = new FormData();\n formData.append('spc', base64spc);\n return fetch(`https://license.pallycon.com/ri/licenseManager.do`, {\n method: 'POST',\n headers: {\n 'pallycon-customdata-v2':\n '==',\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: formData,\n })\n .then((response) => response.text())\n .then((response) => {\n return response;\n })\n .catch((error) => {\n console.error('Error', error);\n });\n};","contentid#contentId":"Type: string\nDefault: undefinedSpecify 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)","headers#headers":"Type: Object\nDefault: undefinedYou can customize headers send to the licenseServer.Example:\nsource={{\n uri: 'https://media.axprod.net/TestVectors/v7-MultiDRM-SingleKey/Manifest_1080p.mpd',\n}}\ndrm={{\n type: DRMType.WIDEVINE,\n licenseServer: 'https://drm-widevine-licensing.axtest.net/AcquireLicense',\n headers: {\n 'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..FAbIiPxX8BHi9RwfzD7Yn-wugU19ghrkBFKsaCPrZmU'\n },\n}}","licenseserver#licenseServer":"Type: string\nDefault: falseThe URL pointing to the licenseServer that will provide the authorization to play the protected stream.","multidrm#multiDrm":"Type: boolean\nDefault: falseIndicates that drm system shall support key rotation, see: https://developer.android.google.cn/media/media3/exoplayer/drm?hl=en#key-rotation","type#type":"Type: DRMType\nDefault: undefinedYou can specify the DRM type, either by string or using the exported DRMType enum.\nValid values are, for Android: DRMType.WIDEVINE / DRMType.PLAYREADY / DRMType.CLEARKEY.\nfor iOS: DRMType.FAIRPLAY","localsourceencryptionkeyscheme#localSourceEncryptionKeyScheme":"Set the url scheme for stream encryption key for local assetsType: StringExample:\nlocalSourceEncryptionKeyScheme=\"my-offline-key\"","common-usage-scenarios#Common Usage Scenarios":"","send-cookies-to-license-server#Send cookies to license server":"You can send Cookies to the license server via headers prop. Example:\ndrm: {\n type: DRMType.WIDEVINE\n licenseServer: 'https://drm-widevine-licensing.axtest.net/AcquireLicense',\n headers: {\n 'Cookie': 'PHPSESSID=etcetc; csrftoken=mytoken; _gat=1; foo=bar'\n },\n}","custom-license-acquisition-only-ios-for-now#Custom License Acquisition (only iOS for now)":"drm: {\n type: DRMType.FAIRPLAY,\n getLicense: (spcString) => {\n const base64spc = Base64.encode(spcString);\n return fetch('YOUR LICENSE SERVER HERE', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n Accept: 'application/json',\n },\n body: JSON.stringify({\n getFairplayLicense: {\n foo: 'bar',\n spcMessage: base64spc,\n }\n })\n })\n .then(response => response.json())\n .then((response) => {\n if (response && response.getFairplayLicenseResponse\n && response.getFairplayLicenseResponse.ckcResponse) {\n return response.getFairplayLicenseResponse.ckcResponse;\n }\n throw new Error('No correct response');\n })\n .catch((error) => {\n console.error('CKC error', error);\n });\n }\n}"}},"/component/methods":{"title":"Methods","data":{"":"This page shows the list of available methods","dismissfullscreenplayer#dismissFullscreenPlayer":"dismissFullscreenPlayer(): PromiseTake the player out of fullscreen mode.\n[!WARNING]\ndeprecated, use setFullScreen method instead","pause#pause":"pause(): PromisePause the video.","presentfullscreenplayer#presentFullscreenPlayer":"presentFullscreenPlayer(): PromisePut the player in fullscreen mode.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.\n[!WARNING]\ndeprecated, use setFullScreen method instead","resume#resume":"resume(): PromiseResume the video.","restoreuserinterfaceforpictureinpicturestopcompleted#restoreUserInterfaceForPictureInPictureStopCompleted":"(restored)This function corresponds to the completion handler in Apple's restoreUserInterfaceForPictureInPictureStop. IMPORTANT: This function must be called after onRestoreUserInterfaceForPictureInPictureStop is called.","save#save":"save(): Promise<{ uri: string }>Save video to your Photos with current filter prop. Returns promise.Notes:\nCurrently only supports highest quality export\nCurrently only supports MP4 export\nCurrently only supports exporting to user's cache directory with a generated UUID filename.\nUser will need to remove the saved video through their Photos app\nWorks with cached videos as well. (Checkout video-caching example)\nIf the video is has not began buffering (e.g. there is no internet connection) then the save function will throw an error.\nIf the video is buffering then the save function promise will return after the video has finished buffering and processing.\nFuture:\nWill support multiple qualities through options\nWill support more formats in the future through options\nWill support custom directory and file name through options","seek#seek":"seek(seconds)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 event will be called.","exact-seek#Exact seek":"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)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.","setvolume#setVolume":"setVolume(value): PromiseThis function will change the volume exactly like volume property. default value and range are the same then.","getcurrentposition#getCurrentPosition":"getCurrentPosition(): PromiseThis function retrieves and returns the precise current position of the video playback, measured in seconds.\nThis function will throw an error if player is not initialized.","setsource#setSource":"setSource(source: ReactVideoSource): PromiseThis function will change the source exactly like source property.\nChanging source with this function will overide source provided as props.","setfullscreen#setFullScreen":"setFullScreen(fullscreen): PromiseIf you set it to true, the player enters fullscreen mode. If you set it to false, the player exits fullscreen mode.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.","nativehtmlvideoref#nativeHtmlVideoRef":"A ref to the underlying html video element. This can be used if you need to integrate a 3d party, web only video library (like hls.js, shaka, video.js...).","example-usage#Example Usage":"const videoRef = useRef(null);\nconst someCoolFunctions = async () => {\n if (!videoRef.current) {\n return;\n }\n // present or dismiss fullscreen player\n videoRef.current.presentFullscreenPlayer();\n videoRef.current.dismissFullscreenPlayer();\n // pause or resume the video\n videoRef.current.pause();\n videoRef.current.resume();\n // save video to your Photos with current filter prop\n const response = await videoRef.current.save();\n const path = response.uri;\n // seek to the specified position represented by seconds\n videoRef.current.seek(200);\n // or on iOS you can seek with tolerance\n videoRef.current.seek(200, 10);\n};\nreturn (\n \n);","static-methods#Static methods":"","getwidevinelevel#getWidevineLevel":"Indicates whether the widevine level supported by device.Possible values are:\n0 - unable to determine widevine support (typically not supported)\n1, 2, 3 - Widevine level supported","iscodecsupported#isCodecSupported":"Indicates whether the provided codec is supported level supported by device.parameters:\nmimetype: mime type of codec to query\nwidth, height: resolution to query\nPossible results:\nhardware - codec is supported by hardware\nsoftware - codec is supported by software only\nunsupported - codec is not supported","ishevcsupported#isHEVCSupported":"Helper which Indicates whether the provided HEVC/1920*1080 is supported level supported by device. It uses isCodecSupported internally.","example-usage-1#Example Usage":"import { VideoDecoderProperties } from 'react-native-video';\nVideoDecoderProperties.getWidevineLevel().then((level) => {\n ...\n});\nVideoDecoderProperties.isCodecSupported('video/hevc', 1920, 1080).then((support) => {\n ...\n});\nVideoDecoderProperties.isHEVCSupported().then((support) => {\n ...\n});"}},"/component/events":{"title":"Events","data":{"":"This page shows the list of available callbacks to handle player notifications","details#Details":"","onaudiobecomingnoisy#onAudioBecomingNoisy":"Callback function that is called when the audio is about to become 'noisy' due to\na change in audio outputs. Typically this is called when audio output is being switched\nfrom an external source like headphones back to the internal speaker. It's a good\nidea to pause the media when this happens so the speaker doesn't start blasting sound.Payload: none","onaudiofocuschanged#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:\nProperty\tType\tDescription\thasAudioFocus\tboolean\tBoolean indicating whether the media has audio focus\t\nExample:\n{\n hasAudioFocus: true;\n}","onaudiotracks#onAudioTracks":"Callback function that is called when audio tracks changePayload:An array of\nProperty\tType\tDescription\tindex\tnumber\tInternal track ID\ttitle\tstring\tDescriptive name for the track\tlanguage\tstring\t2 letter ISO 639-1 code representing the language\tbitrate\tnumber\tbitrate of track\ttype\tstring\tMime type of track\tselected\tboolean\ttrue if track is playing\t\nExample:\n{\n audioTracks: [\n { language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0, selected: true },\n { language: 'en', title: 'English', type: 'audio/mpeg', index: 1 }\n ];\n}","onbandwidthupdate#onBandwidthUpdate":"Callback function that is called when the available bandwidth changes.Payload:\nProperty\tType\tDescription\tbitrate\tnumber\tThe estimated bitrate in bits/sec\twidth\tnumber\tThe width of the video (android only)\theight\tnumber\tThe height of the video (android only)\ttrackId\tstring\tThe track ID of the video track (android only)\t\nExample on iOS:\n{\n bitrate: 1000000;\n}\nExample on Android:\n{\n bitrate: 1000000;\n width: 1920;\n height: 1080;\n trackId: 'some-track-id';\n}\nNote: On Android, you must set the reportBandwidth prop to enable this event. This is due to the high volume of events generated.","onbuffer#onBuffer":"Callback function that is called when the player buffers.Payload:\nProperty\tType\tDescription\tisBuffering\tboolean\tBoolean indicating whether buffering is active\t\nExample:\n{\n isBuffering: true;\n}","oncontrolsvisibilitychange#onControlsVisibilityChange":"Callback function that is called when the controls are hidden or shown. Not possible on iOS.Payload:\nProperty\tType\tDescription\tisVisible\tboolean\tBoolean indicating whether controls are visible\t\nExample:\n{\n isVisible: true;\n}","onend#onEnd":"Callback function that is called when the player reaches the end of the media.Payload: none","onerror#onError":"Callback function that is called when the player experiences a playback error.Payload:\nProperty\tType\tDescription\terror\tobject\tObject containing properties with information about the error","onexternalplaybackchange#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:\nProperty\tType\tDescription\tisExternalPlaybackActive\tboolean\tBoolean indicating whether external playback mode is active\t\nExample:\n{\n isExternalPlaybackActive: true;\n}","onfullscreenplayerwillpresent#onFullscreenPlayerWillPresent":"Callback function that is called when the player is about to enter fullscreen mode.Payload: none","onfullscreenplayerdidpresent#onFullscreenPlayerDidPresent":"Callback function that is called when the player has entered fullscreen mode.Payload: none","onfullscreenplayerwilldismiss#onFullscreenPlayerWillDismiss":"Callback function that is called when the player is about to exit fullscreen mode.Payload: none","onfullscreenplayerdiddismiss#onFullscreenPlayerDidDismiss":"Callback function that is called when the player has exited fullscreen mode.Payload: none","onload#onLoad":"Callback function that is called when the media is loaded and ready to play.NOTE: tracks (audioTracks, textTracks & videoTracks) are not available on the web.Payload:\nProperty\tType\tDescription\tcurrentTime\tnumber\tTime in seconds where the media will start\tduration\tnumber\tLength of the media in seconds\tnaturalSize\tobject\tProperties: _ width - Width in pixels that the video was encoded at _ height - Height in pixels that the video was encoded at * orientation - \"portrait\", \"landscape\" or \"square\"\taudioTracks\tarray\tAn array of audio track info objects with the following properties: _ index - Index number _ title - Description of the track _ language - 2 letter ISO 639-1 or 3 letter ISO639-2 language code _ type - Mime type of track\ttextTracks\tarray\tAn array of text track info objects with the following properties: _ index - Index number _ title - Description of the track _ language - 2 letter ISO 639-1 or 3 letter ISO 639-2 language code _ type - Mime type of track\tvideoTracks\tarray\tAn array of video track info objects with the following properties: _ trackId - ID for the track _ bitrate - Bit rate in bits per second _ codecs - Comma separated list of codecs _ height - Height of the video * width - Width of the video\ttrackId\tstring\tProvide key information about the video track, typically including: Resolution, Bitrate.\t\nExample:\n{\n canPlaySlowForward: true,\n canPlayReverse: false,\n canPlaySlowReverse: false,\n canPlayFastForward: false,\n canStepForward: false,\n canStepBackward: false,\n currentTime: 0,\n duration: 5910.208984375,\n naturalSize: {\n height: 1080\n orientation: 'landscape'\n width: '1920'\n },\n audioTracks: [\n { language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0 },\n { language: 'en', title: 'English', type: 'audio/mpeg', index: 1 }\n ],\n textTracks: [\n { title: '#1 French', language: 'fr', index: 0, type: 'text/vtt' },\n { title: '#2 English CC', language: 'en', index: 1, type: 'text/vtt' },\n { title: '#3 English Director Commentary', language: 'en', index: 2, type: 'text/vtt' }\n ],\n videoTracks: [\n { index: 0, bitrate: 3987904, codecs: \"avc1.640028\", height: 720, trackId: \"f1-v1-x3\", width: 1280 },\n { index: 1, bitrate: 7981888, codecs: \"avc1.640028\", height: 1080, trackId: \"f2-v1-x3\", width: 1920 },\n { index: 2, bitrate: 1994979, codecs: \"avc1.4d401f\", height: 480, trackId: \"f3-v1-x3\", width: 848 }\n ],\n trackId: \"720p 2400kbps\"\n}","onloadstart#onLoadStart":"Callback function that is called when the media starts loading.Payload:\nProperty\tType\tDescription\tisNetwork\tboolean\tBoolean indicating if the media is being loaded from the network\ttype\tstring\tType of the media. Not available on Windows\turi\tstring\tURI for the media source. Not available on Windows\t\nExample:\n{\n isNetwork: true,\n type: '',\n uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'\n}","onplaybackstatechanged#onPlaybackStateChanged":"Callback function that is called when the playback state changes.Payload:\nProperty\tType\tDescription\tisPlaying\tboolean\tBoolean indicating if the media is playing or not\tisSeeking\tboolean\tBoolean indicating if the player is seeking or not\t\nExample:\n{\n isPlaying: true,\n isSeeking: false\n}","onpictureinpicturestatuschanged#onPictureInPictureStatusChanged":"Callback function that is called when picture in picture becomes active or inactive.\nProperty\tType\tDescription\tisActive\tboolean\tBoolean indicating whether picture in picture is active\t\nExample:\n{\n isActive: true;\n}","onplaybackratechange#onPlaybackRateChange":"Callback function that is called when the rate of playback changes - either paused or starts/resumes.\nProperty\tType\tDescription\tplaybackRate\tnumber\t0 when playback is paused, 1 when playing at normal speed. Other values when playback is slowed down or sped up\t\nExample:\n{\n playbackRate: 0, // indicates paused\n}","onprogress#onProgress":"Callback function that is called every progressUpdateInterval milliseconds with info about which position the media is currently playing.\nProperty\tType\tDescription\tcurrentTime\tnumber\tCurrent position in seconds\tplayableDuration\tnumber\tPosition to where the media can be played to using just the buffer in seconds\tseekableDuration\tnumber\tPosition to where the media can be seeked to in seconds. Typically, the total length of the media\t\nExample:\n{\n currentTime: 5.2,\n playableDuration: 34.6,\n seekableDuration: 888\n}","onreadyfordisplay#onReadyForDisplay":"Callback function that is called when the first video frame is ready for display. This is when the poster is removed.Payload: none\niOS: readyForDisplay\nAndroid STATE_READY","onreceiveadevent#onReceiveAdEvent":"Callback function that is called when an AdEvent is received from the IMA's SDK.Enum AdEvent possible values for Android and iOS:\nEvents\nEvent\tPlatform\tDescription\tAD_BREAK_ENDED\tiOS\tFired the first time each ad break ends. Applications must reenable seeking when this occurs (only used for dynamic ad insertion).\tAD_BREAK_READY\tAndroid, iOS\tFires when an ad rule or a VMAP ad break would have played if autoPlayAdBreaks is false.\tAD_BREAK_STARTED\tiOS\tFired 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).\tAD_BUFFERING\tAndroid\tFires when the ad has stalled playback to buffer.\tAD_CAN_PLAY\tAndroid\tFires when the ad is ready to play without buffering, either at the beginning of the ad or after buffering completes.\tAD_METADATA\tAndroid\tFires when an ads list is loaded.\tAD_PERIOD_ENDED\tiOS\tFired 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).\tAD_PERIOD_STARTED\tiOS\tFired 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).\tAD_PROGRESS\tAndroid\tFires when the ad's current time value changes. The event data will be populated with an AdProgressData object.\tALL_ADS_COMPLETED\tAndroid, iOS\tFires 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.\tCLICK\tAndroid, iOS\tFires when the ad is clicked.\tCOMPLETED\tAndroid, iOS\tFires when the ad completes playing.\tCONTENT_PAUSE_REQUESTED\tAndroid\tFires when content should be paused. This usually happens right before an ad is about to cover the content.\tCONTENT_RESUME_REQUESTED\tAndroid\tFires when content should be resumed. This usually happens when an ad finishes or collapses.\tCUEPOINTS_CHANGED\tiOS\tCuepoints changed for VOD stream (only used for dynamic ad insertion).\tDURATION_CHANGE\tAndroid\tFires when the ad's duration changes.\tERROR\tAndroid, iOS\tFires when an error occurred while loading the ad and prevent it from playing.\tFIRST_QUARTILE\tAndroid, iOS\tFires when the ad playhead crosses first quartile.\tIMPRESSION\tAndroid\tFires when the impression URL has been pinged.\tINTERACTION\tAndroid\tFires when an ad triggers the interaction callback. Ad interactions contain an interaction ID string in the ad data.\tLINEAR_CHANGED\tAndroid\tFires when the displayed ad changes from linear to nonlinear, or the reverse.\tLOADED\tAndroid, iOS\tFires when ad data is available.\tLOG\tAndroid, iOS\tFires 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.\tMIDPOINT\tAndroid, iOS\tFires when the ad playhead crosses midpoint.\tPAUSED\tAndroid, iOS\tFires when the ad is paused.\tRESUMED\tAndroid, iOS\tFires when the ad is resumed.\tSKIPPABLE_STATE_CHANGED\tAndroid\tFires when the displayed ads skippable state is changed.\tSKIPPED\tAndroid, iOS\tFires when the ad is skipped by the user.\tSTARTED\tAndroid, iOS\tFires when the ad starts playing.\tSTREAM_LOADED\tiOS\tStream request has loaded (only used for dynamic ad insertion).\tTAPPED\tiOS\tFires when the ad is tapped.\tTHIRD_QUARTILE\tAndroid, iOS\tFires when the ad playhead crosses third quartile.\tUNKNOWN\tiOS\tAn unknown event has fired\tUSER_CLOSE\tAndroid\tFires when the ad is closed by the user.\tVIDEO_CLICKED\tAndroid\tFires when the non-clickthrough portion of a video ad is clicked.\tVIDEO_ICON_CLICKED\tAndroid\tFires when a user clicks a video icon.\tVOLUME_CHANGED\tAndroid\tFires when the ad volume has changed.\tVOLUME_MUTED\tAndroid\tFires when the ad volume has been muted.\t\nPayload:\nProperty\tType\tDescription\tevent\tAdEvent\tThe ad event received\tdata\tRecord | undefined\tThe ad event data\t\nExample:\n{\n \"data\": {\n \"key\": \"value\"\n },\n \"event\": \"LOG\"\n}","onrestoreuserinterfaceforpictureinpicturestop#onRestoreUserInterfaceForPictureInPictureStop":"Callback function that corresponds to Apple's . Call inside of this function when done restoring the user interface.Payload: none","onseek#onSeek":"Callback function that is called when a seek completes.Payload:\nProperty\tType\tDescription\tcurrentTime\tnumber\tThe current time after the seek\tseekTime\tnumber\tThe requested time\t\nExample:\n{\n currentTime: 100.5;\n seekTime: 100;\n}\nBoth the currentTime & seekTime are reported because the video player may not seek to the exact requested position in order to improve seek performance.Note: on iOS, when controls are enable, this callback is not reported. This is a known limitation.","ontimedmetadata#onTimedMetadata":"Callback function that is called when timed metadata becomes availablePayload:\nProperty\tType\tDescription\tmetadata\tarray\tArray of metadata objects\t\nExample:\n{\n metadata: [\n {value: 'Streaming Encoder', identifier: 'TRSN'},\n {value: 'Internet Stream', identifier: 'TRSO'},\n {value: 'Any Time You Like', identifier: 'TIT2'},\n ];\n}","ontexttrackdatachanged#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:\nProperty\tType\tDescription\tsubtitleTracks\tstring\tThe subtitles text content in a compatible format.\t\nExample:\n{\n subtitleTracks: \"This blade has a dark past.\",\n}\nFor details on how to control the visibility of subtitles, see the subtitleStyle section.","ontexttracks#onTextTracks":"Callback function that is called when text tracks changePayload:\nProperty\tType\tDescription\tindex\tnumber\tInternal track ID\ttitle\tstring\tDescriptive name for the track\tlanguage\tstring\t2 letter ISO 639-1 code representing the language\ttype\tstring\tMime type of the track _ TextTrackType.SRT - SubRip (.srt) _ TextTrackType.TTML - TTML (.ttml) * TextTrackType.VTT - WebVTT (.vtt)iOS only supports VTT, Android supports all 3\tselected\tboolean\ttrue if track is playing\t\nExample:\n{\n textTracks: [\n {\n index: 0,\n title: 'Any Time You Like',\n type: 'srt',\n selected: true,\n },\n ];\n}","onvideotracks#onVideoTracks":"Callback function that is called when video tracks changePayload:\nProperty\tType\tDescription\tindex\tnumber\tindex of the track\ttrackId\tstring\tInternal track ID\tcodecs\tstring\tMimeType of codec used for this track\twidth\tnumber\tTrack width\theight\tnumber\tTrack height\tbitrate\tnumber\tBitrate in bps\tselected\tboolean\ttrue if track is selected for playing\trotation\tnumber\t0, 90, 180 or 270 rotation to apply to the track (android only)\t\nExample:\n{\n videoTracks: [\n {\n index: O,\n trackId: \"0\",\n codecs: 'video/mp4',\n width: 1920,\n height: 1080,\n bitrate: 10000,\n selected: true,\n rotation: 0,\n },\n ];\n}","onvolumechange#onVolumeChange":"Callback function that is called when the volume of player changes.\nNote: This event applies to the volume of the player, not the volume of the device.\nPayload:\nProperty\tType\tDescription\tvolume\tnumber\tThe volume of the player (between 0 and 1)\t\nExample:\n{\n volume: 0.5;\n}"}},"/":{"title":"A component for React Native","data":{"about#About":"react-native-video is a React Native library that provides a Video component that renders media content such as videos and streamsIt allows to stream video files (m3u, mpd, mp4, ...) inside your react native application.\nExoplayer for android\nAVplayer for iOS, tvOS and visionOS\nWindows UWP for windows\nHTML5 for web\nTrick mode support\nSubtitles (embeded or side loaded)\nDRM support\nClient side Ads insertion (via google IMA)\nPip (ios)\nEmbedded playback controls\nAnd much more\nThe aim of this package is to have a thin and exhaustive control of player.","v600-information#V6.0.0 Information":"⚠️ Version 6: The following documentation refer to features only available through the v6.0.0 releases.\nAs major rework has been done in case of doubt, you can still use version 5.2.x, see documentation\nVersion 6.x requires react-native >= 0.68.2\n⚠️ from 6.0.0-beta.8 requires also iOS >= 13.0 (default in react-native 0.73)\nFor older versions of react-native, please use version 5.x.","usage#Usage":"// Load the module\nimport Video, {VideoRef} from 'react-native-video';\n// Within your render function, assuming you have a file called\n// \"background.mp4\" in your project. You can include multiple videos\n// on a single screen if you like.\nconst VideoPlayer = () => {\n const videoRef = useRef(null);\n const background = require('./background.mp4');\n return (\n \n )\n}\n// Later on in your styles..\nvar styles = StyleSheet.create({\n backgroundVideo: {\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n },\n});"}},"/installation":{"title":"Installation","data":{"":"Using npm:\nnpm install --save react-native-video\nor using yarn:\nyarn add react-native-video\nThen follow the instructions for your platform to link react-native-video into your project","ios#iOS":"","standard-method#Standard Method":"Run pod install in the ios directory of your project.⚠️ from version 6.0.0 the minimum iOS version required is 13.0. For more information see updating section","enable-custom-feature-in-podfile-file#Enable custom feature in podfile file":"Samples available in sample app see sample pod file","video-caching#Video caching":"To enable Video caching usage, add following line in your podfile:\n(more info here)\n# enable Video caching\n+ $RNVideoUseVideoCaching=true","google-ima#Google IMA":"Google IMA is the google SDK to support Client Side Ads Integration (CSAI), see google documentation for more information.To enable google IMA usage define add following line in your podfile:\n$RNVideoUseGoogleIMA=true\nIf you are using Expo you can use expo plugin for it","android#Android":"From version >= 6.0.0, your application needs to have kotlin version >= 1.8.0\nbuildscript {\n ...\n ext.kotlinVersion = '1.8.0',\n ext.compileSdkVersion = 34\n ext.targetSdkVersion = 34\n ...\n}","enable-custom-feature-in-gradle-file#Enable custom feature in gradle file":"If you are using Expo you can use expo plugin for itYou can disable or enable the following features by setting the following variables in your android/build.gradle file:\nuseExoplayerIMA - Enable Google IMA SDK (Ads support)\nuseExoplayerRtsp - Enable RTSP support\nuseExoplayerSmoothStreaming - Enable SmoothStreaming support\nuseExoplayerDash - Enable Dash support\nuseExoplayerHls - Enable HLS support\nEach of these features enabled will increase the size of your APK, so only enable the features you need.\nBy default enabled features are: useExoplayerSmoothStreaming, useExoplayerDash, useExoplayerHlsExample:\nbuildscript {\n ext {\n ...\n useExoplayerIMA = true\n useExoplayerRtsp = true\n useExoplayerSmoothStreaming = true\n useExoplayerDash = true\n useExoplayerHls = true\n ...\n }\n}\nSee sample app","windows#Windows":"","autolinking#Autolinking":"React Native Windows 0.63 and aboveAutolinking should automatically add react-native-video to your app.","manual-linking#Manual Linking":"React Native Windows 0.62Make the following additions to the given files manually:windows\\myapp.slnAdd the ReactNativeVideoCPP project to your solution (eg. windows\\myapp.sln):\nOpen your solution in Visual Studio 2019\nRight-click Solution icon in Solution Explorer > Add > Existing Project...\nSelect node_modules\\react-native-video\\windows\\ReactNativeVideoCPP\\ReactNativeVideoCPP.vcxproj\nwindows\\myapp\\myapp.vcxprojAdd a reference to ReactNativeVideoCPP to your main application project (eg. windows\\myapp\\myapp.vcxproj):\nOpen your solution in Visual Studio 2019\nRight-click main application project > Add > Reference...\nCheck ReactNativeVideoCPP from Solution Projects\npch.hAdd #include \"winrt/ReactNativeVideoCPP.h\".app.cppAdd PackageProviders().Append(winrt::ReactNativeVideoCPP::ReactPackageProvider()); before InitializeComponent();.React Native Windows 0.61 and belowFollow the manual linking instructions for React Native Windows 0.62 above, but substitute ReactNativeVideoCPP61 for ReactNativeVideoCPP.","tvos#tvOS":"react-native link react-native-video doesn’t work properly with the tvOS target so we need to add the library manually.First select your project in Xcode.After that, select the tvOS target of your application and select « General » tabScroll to « Linked Frameworks and Libraries » and tap on the + buttonSelect RCTVideo-tvOS","visionos#visionOS":"Run pod install in the visionos directory of your projectNothing to do, everything should work out of the box.Note that only basic video support is present, no hls/dash or ads/drm for now."}},"/other/caching":{"title":"Caching","data":{"":"Caching is supported on iOS platforms with a CocoaPods setup, and on android using SimpleCache.","android#Android":"Android uses a LRU SimpleCache with a variable cache size that can be specified by bufferConfig - cacheSizeMB. This creates a folder named RNVCache in the app's cache folder. Do note RNV does not yet offer a native call to flush the cache, it can be flushed by clearing the app's cache.In addition, this resolves RNV6's repeated source URI call problem when looping a video on Android.","ios#iOS":"","technology#Technology":"The cache is backed by SPTPersistentCache and DVAssetLoaderDelegate.","how-does-it-work#How Does It Work":"The caching is based on the url of the asset.\nSPTPersistentCache is a LRU (Least Recently Used) cache.","restrictions#Restrictions":"Currently, caching is only supported for URLs that end in a .mp4, .m4v, or .mov extension. In future versions, URLs that end in a query string (e.g. test.mp4?resolution=480p) will be support once dependencies allow access to the Content-Type header. At this time, HLS playlists (.m3u8) and videos that sideload text tracks are not supported and will bypass the cache.You will also receive warnings in the Xcode logs by using the debug mode. So if you are not 100% sure if your video is cached, check your Xcode logs!By default files expire after 30 days and the maximum cache size is 100mb.In a future release the cache might have more configurable options."}},"/other/debug":{"title":"Debugging","data":{"":"This page describe useful tips for debugging and investigating issue in the package or in your application.","using-the-sample-app#Using the sample app":"This repository contains multiple a sample implementation in example folder.\nIt is always preferable to test behavior on a sample app than in a full app implementation.\nThe basic sample allow to test a lot of feature.\nTo use the sample you will need to do steps:\nClone this repository: git clone git@github.com:TheWidlarzGroup/react-native-video.git\nGo to root folder and build it. It will generate a transpiled version of the package in lib folder: cd react-native-video && yarn && yarn build\nGo to the sample and install it: cd example/basic && yarn install\nBuild it ! for android yarn android for ios cd ios && pod install && cd .. && yarn ios","http-playback-doesnt-work-or--black-screen-on-release-build-android#HTTP playback doesn't work or Black Screen on Release build (Android)":"If your video work on Debug mode, but on Release you see only black screen, please, check the link to your video. If you use 'http' protocol there, you will need to add next string to your AndroidManifest.xml file. Details here\n","decoder-issue-android#Decoder Issue (Android)":"Devices have a maximum of simultaneous possible playback. It means you have reach this limit. Exoplayer returns: 'Unable to instantiate decoder'known issue: This issue happen really often in debug mode.","you-cannot-play-clean-content-all-os#You cannot play clean content (all OS)":"Here are the steps to consider before opening a ticket in issue tracker","check-you-can-access-to-remote-file#Check you can access to remote file":"Ensure you can download to manifest / content file with a browser for example","check-another-player-can-read-the-content#Check another player can read the content":"Usually clear playback can be read with all Video player. Then you should ensure content can be played without any issue with another player (VideoLan/VLC is a good reference implementation)","you-cannot-play-protected-content-all-os#You cannot play protected content (all OS)":"","protected-content-gives-error-token-error--access-forbidden#Protected content gives error (token error / access forbidden)":"If content is protected with an access token or any other http header, ensure you can access to you data with a wget call or a rest client app. You need to provide all needed access token / authentication parameters.","i-need-to-debug-network-calls-but-i-dont-see-them-in-react-native-debugging-tools#I need to debug network calls but I don't see them in react native debugging tools":"This is a react native limitation. React native tools can only see network calls done in JS.\nTo achieve that, you need to record network trace to ensure communications with server is correct.\nCharles proxy or Fiddler are a simple and useful tool to sniff all http/https calls.\nWith these tool you should be able to analyze what is going on with network. You will see all access to content and DRM, audio / video chunks, ...Then try to compare exchanges with previous tests you made.","debug-media3-build-from-media3-source#Debug media3: build from media3 source":"If you need to use a specific exoplayer version or patch default behavior, you may want to build from media3 source code.Building from media3 source is possible. You need to add 2 or 3 things in your app:","configure-player-path#Configure player path":"You need to add following lines in settings.gradle to configure your media3 source path:\ngradle.ext.androidxMediaModulePrefix = 'media-'\napply from: file(\"../../../../media3/core_settings.gradle\")\nOf course, you should replace with media3 source path. Be carefull, you need to use the same version (or version with compatible api) that the package support.","enable-building-from-source#Enable building from source":"In your build.gradle file, add following setting:\nbuildscript {\n ext {\n ...\n buildFromMedia3Source = true\n ...\n }\n}","its-still-not-working#It's still not working":"You can try to open a ticket or contact us for premium support!"}},"/other/expo":{"title":"Expo","data":{"expo-plugin#Expo plugin":"From version 6.3.1, we have added support for expo plugin. You can configure react-native-video properties in app.json (or app.config.json or app.config.js) file.\nIt's useful when you are using expo managed workflow (expo prebuild) as it will automatically configure react-native-video properties in native part of the expo project.\n// app.json\n{\n {\n \"name\": \"my app\",\n \"plugins\": [\n [\n \"react-native-video\",\n {\n // ...\n \"enableNotificationControls\": true,\n \"androidExtensions\": {\n \"useExoplayerRtsp\": false,\n \"useExoplayerSmoothStreaming\": false,\n \"useExoplayerHls\": false,\n \"useExoplayerDash\": false,\n }\n // ...\n }\n ]\n ]\n}\n}","expo-plugin-properties#Expo Plugin Properties":"Property\tType\tDefault\tDescription\tenableNotificationControls\tboolean\tfalse\tAdd required changes on android to use notification controls for video player\tenableBackgroundAudio\tboolean\tfalse\tAdd required changes to play video in background on iOS\tenableADSExtension\tboolean\tfalse\tAdd required changes to use ads extension for video player\tenableCacheExtension\tboolean\tfalse\tAdd required changes to use cache extension for video player on iOS\tandroidExtensions\tobject\t{}\tYou can enable/disable extensions as per your requirement - this allow to reduce library size on android"}},"/other/misc":{"title":"Miscellaneous","data":{"ios-app-transport-security#iOS App Transport Security":"By default, iOS will only load encrypted (https) urls. If you want to load content from an unencrypted (http) source, you will need to modify your Info.plist file and add the following entry:\nFor more detailed info check this article","audio-mixing#Audio Mixing":"At some point in the future, react-native-video will include an Audio Manager for configuring how videos mix with other apps playing sounds on the device.On iOS, if you would like to allow other apps to play music over your video component, make the following change:AppDelegate.m\n#import // import\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions\n{\n ...\n [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil]; // allow\n ...\n}\nYou can also use the ignoreSilentSwitch prop.","android-expansion-file-usage#Android Expansion File Usage":"Expansions files allow you to ship assets that exceed the 100MB apk size limit and don't need to be updated each time you push an app update.This only supports mp4 files and they must not be compressed. Example command line for preventing compression:\nzip -r -n .mp4 *.mp4 player.video.example.com\n// Within your render function, assuming you have a file called\n// \"background.mp4\" in your expansion file. Just add your main and (if applicable) patch version\n ","load-files-with-the-rn-asset-system#Load files with the RN Asset System":"The asset system introduced in RN 0.14 allows loading image resources shared across iOS and Android without touching native code. As of RN 0.31 the same is true of mp4 video assets for Android. As of RN 0.33 iOS is also supported. Requires react-native-video@0.9.0.\n","play-in-background-on-ios#Play in background on iOS":"To enable audio to play in background on iOS the audio session needs to be set to AVAudioSessionCategoryPlayback. See [Apple documentation][3] for additional details. (NOTE: there is now a ticket to expose this as a prop )"}},"/other/new-arch":{"title":"New Architecture","data":{"fabric#Fabric":"Library currently does not support Fabric. We are working on it. In the meantime, you can use Interop Layer.","interop-layer#Interop Layer":"You can use this library on New Architecture by using Interop Layer. To use Interop Layer you need to have react-native >= 0.72.0 & react-native-video >= 6.0.0-beta.5.For react-native < 0.74 you need to add config in react-native.config.js file.\nmodule.exports = {\n project: {\n android: {\n unstable_reactLegacyComponentNames: ['Video'],\n },\n ios: {\n unstable_reactLegacyComponentNames: ['Video'],\n },\n },\n};","bridgeless-mode#Bridgeless Mode":"Library currently does not support Bridgeless Mode. We are working on it."}},"/other/plugin":{"title":"Plugin (experimental)","data":{"":"Since Version 6.4.0, it is possible to create plugins for analytics management and maybe much more.\nA sample plugin is available in the repository in: example/react-native-video-plugin-sample. (important FIXME, put sample link)","concept#Concept":"Most of the analytics system which tracks player information (bitrate, errors, ...) can be integrated directly with Exoplayer or AVPlayer handles.This plugin system allows none intrusive integration of analytics in the react-native-package. It shall be done in native language (kotlin/swift).The idea behind this system is to be able to plug an analytics package to react native video without doing any code change (ideally).Following documentation will show on how to create a new plugin for react native video","warning-and-consideration#Warning and consideration":"This is an experiental API, it is subject to change. The api with player is very simple but should be flexible enough to implement analytics system. If you need some metadata, you should implement setter in the new package you are creating.As api is flexible, it makes possible to missuse the system. It is necessary to consider the player handle as read-only. If you modify player behavior, we cannot garanty the good behavior of react-native-video package.","general#General":"First you need to create a new react native package:\nnpx create-react-native-library@latest react-native-video-custom-analytics\nBoth android and iOS implementation expose an interface RNVPlugin.\nYour react-native-video-custom-analytics shall implement this interface and register itself as a plugin for react native video.","android#Android":"There is no special requierement for gradle file.\nYou need two mandatory action to be able to receive player handle","1-create-the-plugin#1/ Create the plugin":"First you should instanciate a class which extends RNVPlugin.The proposed integration implement RNVPlugin directly inside the Module file (VideoPluginSampleModule).The RNVPlugin interface only defines 2 functions, see description here under.\n /**\n * Function called when a new player is created\n * @param id: a random string identifying the player\n * @param player: the instantiated player reference\n */\n fun onInstanceCreated(id: String, player: Any)\n /**\n * Function called when a player should be destroyed\n * when this callback is called, the plugin shall free all\n * resources and release all reference to Player object\n * @param id: a random string identifying the player\n * @param player: the player to release\n */\n fun onInstanceRemoved(id: String, player: Any)","2-register-the-plugin#2/ register the plugin":"To register this allocated class in the main react native video package you should call following function:\nReactNativeVideoManager.getInstance().registerPlugin(plugin)\nThe proposed integration register the instanciated class in createNativeModules entry point.Your native module can now track Player updates directly from Player reference and report to backend.","ios#ios":"","1-podspec-integration#1/ podspec integration":"Your new module shall be able to access to react-native-video package, then we must declare it as a dependency of the new module you are creating.\n s.dependency \"react-native-video\"","2-create-the-plugin#2/ Create the plugin":"First you should instanciate a class which extends RNVPlugin.The proposed integration implement RNVPlugin directly inside the entry point of the module file (VideoPluginSample).The RNVPlugin interface only defines 2 functions, see description here under.\n /**\n * Function called when a new player is created\n * @param player: the instantiated player reference\n */\n func onInstanceCreated(player: Any)\n /**\n * Function called when a player should be destroyed\n * when this callback is called, the plugin shall free all\n * resources and release all reference to Player object\n * @param player: the player to release\n */\n func onInstanceRemoved(player: Any)","3-register-the-plugin#3/ Register the plugin":"To register this allocated class in the main react native video package you should register it by calling this function:\nReactNativeVideoManager.shared.registerPlugin(plugin: plugin)\nThe proposed integration register the instanciated class in file VideoPluginSample in the init function:\nimport react_native_video\n...\noverride init() {\n super.init()\n ReactNativeVideoManager.shared.registerPlugin(plugin: self)\n}\nYour native module can now track Player updates directly from Player reference and report to backend."}},"/projects":{"title":"Useful projects","data":{"":"This page links other open source projects which can be useful for your player implementation. \nIf you have a project which can be useful for other users, feel free to open a PR to add it here.","ui-over-react-native-video#UI over react-native-video":"react-native-video-controls: First reference player UI\nreact-native-media-console: React-native-video-controls updated and rewritten in typescript\nreact-native-corner-video: A floating video player","other-tools#Other tools":"react-native-track-player: A toolbox to control player over media session"}},"/updating":{"title":"Updating","data":{"version-600#Version 6.0.0":"","ios#iOS":"","min-ios-version#Min iOS version":"From version 6.0.0, the minimum iOS version supported is 13.0. Projects that are using react-native < 0.73 will need to set the minimum iOS version to 13.0 in the Podfile.You can do it by adding the following code to your Podfile:\n- platform :ios, min_ios_version_supported\n+ MIN_IOS_OVERRIDE = '13.0'\n+ if Gem::Version.new(MIN_IOS_OVERRIDE) > Gem::Version.new(min_ios_version_supported)\n+ min_ios_version_supported = MIN_IOS_OVERRIDE\n+ end","linking#linking":"In your project Podfile add support for static dependency linking. This is required to support the new Promises subdependency in the iOS swift conversion.Add use_frameworks! :linkage => :static just under platform :ios in your ios project Podfile.See the example ios project for reference","podspec#podspec":"You can remove following lines from your podfile as they are not necessary anymore\n- `pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'`\n- `pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'`\nIf you were previously using VideoCaching, you should $RNVideoUseVideoCaching flag in your podspec, see: installation section","android#Android":"If you are already using Exoplayer on V5, you should remove the patch done from android/settings.gradle\n- include ':react-native-video'\n- project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')","using-app-build-settings#Using app build settings":"You will need to create a project.ext section in the top-level build.gradle file (not app/build.gradle). Fill in the values from the example below using the values found in your app/build.gradle file.\n// Top-level build file where you can add configuration options common to all sub-projects/modules.\nbuildscript {\n ... // Various other settings go here\n}\nallprojects {\n ... // Various other settings go here\n project.ext {\n compileSdkVersion = 31\n buildToolsVersion = \"30.0.2\"\n minSdkVersion = 21\n targetSdkVersion = 22\n }\n}\nIf you encounter an error Could not find com.android.support:support-annotations:27.0.0. reinstall your Android Support Repository."}},"/component/props":{"title":"Configurable props","data":{"":"This page shows the list of available properties to configure player","details#Details":"","adtagurl#adTagUrl":"[!WARNING]\nDeprecated, use source.ad.adTagUrl instead\nSets the VAST uri to play AVOD ads.Example:\nadTagUrl=\"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=\"\nNote: You need enable IMA SDK in gradle or pod file - enable client side ads insertion","allowsexternalplayback#allowsExternalPlayback":"Indicates whether the player allows switching to external playback mode such as AirPlay or HDMI.\ntrue (default) - allow switching to external playback mode\nfalse - Don't allow switching to external playback mode","audiooutput#audioOutput":"Changes the audio output.\nspeaker (default) - plays through speaker\nearpiece - plays through earpiece","automaticallywaitstominimizestalling#automaticallyWaitsToMinimizeStalling":"A Boolean value that indicates whether the player should automatically delay playback in order to minimize stalling. For clients linked against iOS 10.0 and later\nfalse - Immediately starts playback\ntrue (default) - Delays playback in order to minimize stalling","bufferconfig#bufferConfig":"[!WARNING]\nDeprecated, use source.bufferConfig instead\nAdjust the buffer settings. This prop takes an object with one or more of the properties listed below.\nProperty\tType\tDescription\tminBufferMs\tnumber\tThe default minimum duration of media that the player will attempt to ensure is buffered at all times, in milliseconds.\tmaxBufferMs\tnumber\tThe default maximum duration of media that the player will attempt to buffer, in milliseconds.\tbufferForPlaybackMs\tnumber\tThe default duration of media that must be buffered for playback to start or resume following a user action such as a seek, in milliseconds.\tbufferForPlaybackAfterRebufferMs\tnumber\tThe default duration of media that must be buffered for playback to resume after a rebuffer, in milliseconds. A rebuffer is defined to be caused by buffer depletion rather than a user action.\tbackBufferDurationMs\tnumber\tThe number of milliseconds of buffer to keep before the current position. This allows rewinding without rebuffering within that duration.\tmaxHeapAllocationPercent\tnumber\tThe percentage of available heap that the video can use to buffer, between 0 and 1\tminBackBufferMemoryReservePercent\tnumber\tThe percentage of available app memory at which during startup the back buffer will be disabled, between 0 and 1\tminBufferMemoryReservePercent\tnumber\tThe percentage of available app memory to keep in reserve that prevents buffer from using it, between 0 and 1\tcacheSizeMB\tnumber\tCache size in MB, enabling this to prevent new src requests and save bandwidth while repeating videos, or 0 to disable. Android only.\tlive\tobject\tObject containing another config set for live playback configuration, see next table\t\nDescription of live object:\nProperty\tType\tDescription\tmaxPlaybackSpeed\tnumber\tThe maximum playback speed the player can use to catch up when trying to reach the target live offset.\tminPlaybackSpeed\tnumber\tThe minimum playback speed the player can use to fall back when trying to reach the target live offset.\tmaxOffsetMs\tnumber\tThe maximum allowed live offset. Even when adjusting the offset to current network conditions, the player will not attempt to get above this offset during playback.\tminOffsetMs\tnumber\tThe minimum allowed live offset. Even when adjusting the offset to current network conditions, the player will not attempt to get below this offset during playback.\ttargetOffsetMs\tnumber\tThe target live offset. The player will attempt to get close to this live offset during playback if possible.\t\nFor android, more informations about live configuration can be find hereExample with default values:\nbufferConfig={{\n minBufferMs: 15000,\n maxBufferMs: 50000,\n bufferForPlaybackMs: 2500,\n bufferForPlaybackAfterRebufferMs: 5000,\n backBufferDurationMs: 120000,\n cacheSizeMB: 0,\n live: {\n targetOffsetMs: 500,\n },\n}}\nPlease note that the Android cache is a global cache that is shared among all components; individual components can still opt out of caching behavior by setting cacheSizeMB to 0, but multiple components with a positive cacheSizeMB will be sharing the same one, and the cache size will always be the first value set; it will not change during the app's lifecycle.","bufferingstrategy#bufferingStrategy":"Configure buffering / data loading strategy.\nDefault (default): use exoplayer default loading strategy\nDisableBuffering: never try to buffer more than needed. Be carefull using this value will stop playback. To be used with care.\nDependingOnMemory: use exoplayer default strategy, but stop buffering and starts gc if available memory is low |","chapters#chapters":"To provide a custom chapter source for tvOS. This prop takes an array of objects with the properties listed below.\nProperty\tType\tDescription\ttitle\tstring\tThe title of the chapter to create\tstartTime\tnumber\tThe start time of the chapter in seconds\tendTime\tnumber\tThe end time of the chapter in seconds\turi\tstring?\tOptional: Provide an http orl or the some base64 string to override the image of the chapter. For some media files the images are generated automatically","currentplaybacktime#currentPlaybackTime":"When playing an HLS live stream with a EXT-X-PROGRAM-DATE-TIME tag configured, then this property will contain the epoch value in msec.","controls#controls":"Determines whether to show player controls.\nfalse (default) - Don't show player controls\ntrue - Show player controls\nControls are always shown in fullscreen mode, even when controls={false}.\nIf needed, you can also add your controls or use a package like react-native-video-controls or react-native-media-console, see Useful Side Project.","controlsstyles#controlsStyles":"Adjust the control styles. This prop is need only if controls={true} and is an object. See the list of prop supported below.\nProperty\tType\tDescription\thidePosition\tboolean\tHides the position indicator. Default is false.\thidePlayPause\tboolean\tHides the play/pause button. Default is false.\thideForward\tboolean\tHides the forward button. Default is false.\thideRewind\tboolean\tHides the rewind button. Default is false.\thideNext\tboolean\tHides the next button. Default is false.\thidePrevious\tboolean\tHides the previous button. Default is false.\thideFullscreen\tboolean\tHides the fullscreen button. Default is false.\thideSeekBar\tboolean\tThe default value is false, allowing you to hide the seek bar for live broadcasts.\thideDuration\tboolean\tThe default value is false, allowing you to hide the duration.\thideNavigationBarOnFullScreenMode\tboolean\tThe default value is true, allowing you to hide the navigation bar on full-screen mode.\thideNotificationBarOnFullScreenMode\tboolean\tThe default value is true, allowing you to hide the notification bar on full-screen mode.\thideSettingButton\tboolean\tThe default value is true, allowing you to hide the setting button.\tseekIncrementMS\tnumber\tThe default value is 10000. You can change the value to increment forward and rewind.\tliveLabel\tstring\tAllowing you to set a label for live video.\t\nExample with default values:\ncontrolsStyles={{\n hidePosition: false,\n hidePlayPause: false,\n hideForward: false,\n hideRewind: false,\n hideNext: false,\n hidePrevious: false,\n hideFullscreen: false,\n hideSeekBar: false,\n hideDuration: false,\n hideNavigationBarOnFullScreenMode: true,\n hideNotificationBarOnFullScreenMode: true,\n hideSettingButton: true,\n seekIncrementMS: 10000,\n liveLabel: \"LIVE\"\n}}","contentstarttime#contentStartTime":"[!WARNING]\nDeprecated, use source.contentStartTime instead\nThe 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.\nNote: This feature only works on DASH streams","debug#debug":"Enable more verbosity in logs.\n[!WARNING]\nDo not use this open in production build\nProperty\tType\tDescription\tenable\tboolean\twhen true, display logs with verbosity higher\tthread\tboolean\tenable thread display\t\nExample with default values:\ndebug={{\n enable: true,\n thread: true,\n}}","disablefocus#disableFocus":"Determines whether video audio should override background music/audio in Android devices.\nfalse (default) - Override background audio/music\ntrue - Let background audio/music from other apps play\nNote: Allows multiple videos to play if set to true. If false, when one video is playing and another is started, the first video will be paused.","disabledisconnecterror#disableDisconnectError":"Determines if the player needs to throw an error when connection is lost or not\nfalse (default) - Player will throw an error when connection is lost\ntrue - Player will keep trying to buffer when network connect is lost","drm#drm":"[!WARNING]\ndeprecated, use source.drm instead\nTo setup DRM please follow this guide\n⚠️ DRM is not supported on visionOS yet","filter#filter":"Add video filter\nFilterType.NONE (default) - No Filter\nFilterType.INVERT - CIColorInvert\nFilterType.MONOCHROME - CIColorMonochrome\nFilterType.POSTERIZE - CIColorPosterize\nFilterType.FALSE - CIFalseColor\nFilterType.MAXIMUMCOMPONENT - CIMaximumComponent\nFilterType.MINIMUMCOMPONENT - CIMinimumComponent\nFilterType.CHROME - CIPhotoEffectChrome\nFilterType.FADE - CIPhotoEffectFade\nFilterType.INSTANT - CIPhotoEffectInstant\nFilterType.MONO - CIPhotoEffectMono\nFilterType.NOIR - CIPhotoEffectNoir\nFilterType.PROCESS - CIPhotoEffectProcess\nFilterType.TONAL - CIPhotoEffectTonal\nFilterType.TRANSFER - CIPhotoEffectTransfer\nFilterType.SEPIA - CISepiaTone\nFor more details on these filters refer to the iOS docs.Notes:\nUsing a filter can impact CPU usage. A workaround is to save the video with the filter and then load the saved video.\nVideo filter is currently not supported on HLS playlists.\nfilterEnabled must be set to true","filterenabled#filterEnabled":"Enable video filter.\nfalse (default) - Don't enable filter\ntrue - Enable filter","focusable#focusable":"Whether this video view should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.\nfalse - Makes view unfocusable\ntrue (default) - Makes view focusable","fullscreen#fullscreen":"Controls whether the player enters fullscreen on play.\nSee presentFullscreenPlayer for details.\nfalse (default) - Don't display the video in fullscreen\ntrue - Display the video in fullscreen","fullscreenautorotate#fullscreenAutorotate":"If a preferred fullscreenOrientation is set, causes the video to rotate to that orientation but permits rotation of the screen to orientation held by user. Defaults to TRUE.","fullscreenorientation#fullscreenOrientation":"all (default) -\nlandscape\nportrait","headers#headers":"Pass headers to the HTTP client. Can be used for authorization. Headers must be a\npart of the source object.Example:\nsource={{\n uri: \"https://www.example.com/video.mp4\",\n headers: {\n Authorization: 'bearer some-token-value',\n 'X-Custom-Header': 'some value'\n }\n}}","hideshutterview#hideShutterView":"Controls whether the ExoPlayer shutter view (black screen while loading) is enabled.\nfalse (default) - Show shutter view\ntrue - Hide shutter view","ignoresilentswitch#ignoreSilentSwitch":"Controls the iOS silent switch behavior\n\"inherit\" (default) - Use the default AVPlayer behavior\n\"ignore\" - Play audio even if the silent switch is set\n\"obey\" - Don't play audio if the silent switch is set","maxbitrate#maxBitRate":"Sets the desired limit, in bits per second, of network bandwidth consumption when multiple video streams are available for a playlist.Default: 0. Don't limit the maxBitRate.Note: This property can interact with selectedVideoTrack.\nTo use maxBitrate, selectedVideoTrack shall be undefined or {type: SelectedVideoTrackType.AUTO}.Example:\nmaxBitRate={2000000} // 2 megabits","minloadretrycount#minLoadRetryCount":"[!WARNING]\ndeprecated, use source.minLoadRetryCount key instead\nSets the minimum number of times to retry loading data before failing and reporting an error to the application. Useful to recover from transient internet failures.Default: 3. Retry 3 times.Example:\nminLoadRetryCount={5} // retry 5 times","mixwithothers#mixWithOthers":"Controls how Audio mix with other apps.\n\"inherit\" (default) - Use the default AVPlayer behavior\n\"mix\" - Audio from this video mixes with audio from other apps.\n\"duck\" - Reduces the volume of other apps while audio from this video plays.","muted#muted":"Controls whether the audio is muted\nfalse (default) - Don't mute audio\ntrue - Mute audio","paused#paused":"Controls whether the media is paused\nfalse (default) - Don't pause the media\ntrue - Pause the media","pictureinpicture#pictureInPicture":"Determine whether the media should played as picture in picture.\nfalse (default) - Don't not play as picture in picture\ntrue - Play the media as picture in picture\nNOTE: Video ads cannot start when you are using the PIP on iOS (more info available at Google IMA SDK Docs). If you are using custom controls, you must hide your PIP button when you receive the STARTED event from onReceiveAdEvent and show it again when you receive the ALL_ADS_COMPLETED event.","playinbackground#playInBackground":"Determine whether the media should continue playing while the app is in the background. This allows customers to continue listening to the audio.\nfalse (default) - Don't continue playing the media\ntrue - Continue playing the media\nTo use this feature on iOS, you must:\nEnable Background Audio in your Xcode project\nSet the ignoreSilentSwitch prop to \"ignore\"","playwheninactive#playWhenInactive":"Determine whether the media should continue playing when notifications or the Control Center are in front of the video.\nfalse (default) - Don't continue playing the media\ntrue - Continue playing the media","poster#poster":"[!WARNING]\nValue: string with a URL for the poster is deprecated, use poster as object instead\nAn image to display while the video is loadingValue: Props for the Image component. The poster is visible when the source attribute is provided.\n\n poster={{\n source: { uri: \"https://baconmockup.com/300/200/\" },\n resizeMode: \"cover\",\n // ...\n }}\n ","posterresizemode#posterResizeMode":"[!WARNING]\ndeprecated, use poster with resizeMode key instead\nDetermines how to resize the poster image when the frame doesn't match the raw video dimensions.\n\"contain\" (default) - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).\n\"center\" - Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.\n\"cover\" - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).\n\"none\" - Don't apply resize\n\"repeat\" - Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only)\n\"stretch\" - Scale width and height independently, This may change the aspect ratio of the src.","preferredforwardbufferduration#preferredForwardBufferDuration":"The duration the player should buffer media from the network ahead of the playhead to guard against playback disruption. Sets the preferredForwardBufferDuration instance property on AVPlayerItem.Default: 0","preventsdisplaysleepduringvideoplayback#preventsDisplaySleepDuringVideoPlayback":"Controls whether or not the display should be allowed to sleep while playing the video. Default is not to allow display to sleep.Default: true","progressupdateinterval#progressUpdateInterval":"Delay in milliseconds between onProgress events in milliseconds.Default: 250.0","rate#rate":"Speed at which the media should play.\n0.0 - Pauses the video (iOS only)\n1.0 - Play at normal speed (default)\nOther values - Slow down or speed up playback","renderloader#renderLoader":"Allows you to create custom components to display while the video is loading.\nIf renderLoader is provided, poster and posterResizeMode will be ignored.\nrenderLoader is either a component or a function returning a component.\nIt is recommended to use the function for optimization matter.renderLoader function be called with parameters of type ReactVideoRenderLoaderProps to be able to adapt loader\ninterface ReactVideoRenderLoaderProps {\n source?: ReactVideoSource; /// source of the video\n style?: StyleProp; /// style to apply\n resizeMode?: EnumValues; /// resizeMode provided to the video component\n}\nSample:\n\n renderLoader={() => (\n \n Custom Loader \n )\n }\n ","repeat#repeat":"Determine whether to repeat the video when the end is reached\nfalse (default) - Don't repeat the video\ntrue - Repeat the video","reportbandwidth#reportBandwidth":"Determine whether to generate onBandwidthUpdate events. This is needed due to the high frequency of these events on ExoPlayer.\nfalse (default) - Don't generate onBandwidthUpdate events\ntrue - Generate onBandwidthUpdate events","resizemode#resizeMode":"Determines how to resize the video when the frame doesn't match the raw video dimensions.\n\"none\" (default) - Don't apply resize\n\"contain\" - Scale the video uniformly (maintain the video's aspect ratio) so that both dimensions (width and height) of the video will be equal to or less than the corresponding dimension of the view (minus padding).\n\"cover\" - Scale the video uniformly (maintain the video's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).\n\"stretch\" - Scale width and height independently, This may change the aspect ratio of the src.","selectedaudiotrack#selectedAudioTrack":"Configure which audio track, if any, is played.\nselectedAudioTrack={{\n type: Type,\n value: Value\n}}\nExample:\nselectedAudioTrack={{\n type: \"title\",\n value: \"Dubbing\"\n}}\nType\tValue\tDescription\t\"system\" (default)\tN/A\tPlay the audio track that matches the system language. If none match, play the first track.\t\"disabled\"\tN/A\tTurn off audio\t\"title\"\tstring\tPlay the audio track with the title specified as the Value, e.g. \"French\"\t\"language\"\tstring\tPlay the audio track with the language specified as the Value, e.g. \"fr\"\t\"index\"\tnumber\tPlay the audio track with the index specified as the value, e.g. 0\t\nIf a track matching the specified Type (and Value if appropriate) is unavailable, the first audio track will be played. If multiple tracks match the criteria, the first match will be used.","selectedtexttrack#selectedTextTrack":"Configure which text track (caption or subtitle), if any, is shown.\nselectedTextTrack={{\n type: Type,\n value: Value\n}}\nExample:\nselectedTextTrack={{\n type: \"title\",\n value: \"English Subtitles\"\n}}\nType\tValue\tDescription\t\"system\" (default)\tN/A\tDisplay captions only if the system preference for captions is enabled\t\"disabled\"\tN/A\tDon't display a text track\t\"title\"\tstring\tDisplay the text track with the title specified as the Value, e.g. \"French 1\"\t\"language\"\tstring\tDisplay the text track with the language specified as the Value, e.g. \"fr\"\t\"index\"\tnumber\tDisplay the text track with the index specified as the value, e.g. 0\t\nBoth iOS & Android (only 4.4 and higher) offer Settings to enable Captions for hearing impaired people. If \"system\" is selected and the Captions Setting is enabled, iOS/Android will look for a caption that matches that customer's language and display it.If a track matching the specified Type (and Value if appropriate) is unavailable, no text track will be displayed. If multiple tracks match the criteria, the first match will be used.","selectedvideotrack#selectedVideoTrack":"Configure which video track should be played. By default, the player uses Adaptive Bitrate Streaming to automatically select the stream it thinks will perform best based on available bandwidth.\nselectedVideoTrack={{\n type: Type,\n value: Value\n}}\nExample:\nselectedVideoTrack={{\n type: \"resolution\",\n value: 480\n}}\nType\tValue\tDescription\t\"auto\" (default)\tN/A\tLet the player determine which track to play using ABR\t\"disabled\"\tN/A\tTurn off video\t\"resolution\"\tnumber\tPlay the video track with the height specified, e.g. 480 for the 480p stream\t\"index\"\tnumber\tPlay the video track with the index specified as the value, e.g. 0\t\nIf a track matching the specified Type (and Value if appropriate) is unavailable, ABR will be used.","shuttercolor#shutterColor":"Apply color to shutter view, if you see black flashes before video start then set\nshutterColor = 'transparent';\nblack (default)","source#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. Please be sure that all props are provided before/at the same time as setting the source.Rendering the player component with a null source will init the player, and start playing once a source value is provided.Providing a null source value after loading a previous source will stop playback, and clear out the previous source content.The docs for this prop are incomplete and will be updated as each option is investigated and tested.","asset-loaded-via-require#Asset loaded via require":"⚠️ on iOS, you file name must not contain spaces eg. my video.mp4 will not work, use my-video.mp4 instead\nExample:Pass directly the asset to play (deprecated)\nconst sintel = require('./sintel.mp4');\nsource = {sintel};\nOr by using an uri (starting from 6.0.0-beta.6)\nconst sintel = require('./sintel.mp4');\nsource={{ uri: sintel }}","uri-string#URI string":"A number of URI schemes are supported by passing an object with a uri attribute.All uri string shall be url encoded.\nFor exemple 'www.myurl.com/blabla?q=test uri' is invalid, where 'www.myurl.com/blabla?q=test%20uri' is valid","web-address-http-https#Web address (http://, https://)":"Example:\nsource={{uri: 'https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4' }}","file-path-file#File path (file://)":"Example:\nsource={{ uri: 'file:///sdcard/Movies/sintel.mp4' }}\nNote: Your app will need to request permission to read external storage if you're accessing a file outside your app.","file-from-asset-folder-asset#File from asset folder (asset://)":"Allows to play a video file from the asset folder from the applicationExample:\nsource={{ uri: 'asset:///sintel.mp4' }}","ipod-library-ipod-library#iPod Library (ipod-library://)":"Path to a sound file in your iTunes library. Typically shared from iTunes to your app.Example:\nsource={{ uri: 'ipod-library:///path/to/music.mp3' }}\nNote: Using this feature adding an entry for NSAppleMusicUsageDescription to your Info.plist file as described here","explicit-mimetype-for-the-stream#Explicit mimetype for the stream":"Provide a member type with value (mpd/m3u8/ism) inside the source object.\nSometimes is needed when URL extension does not match with the mimetype that you are expecting, as seen on the next example. (Extension is .ism -smooth streaming- but file served is on format mpd -mpeg dash-)Example:\nsource={{ uri: 'http://host-serving-a-type-different-than-the-extension.ism/manifest(format=mpd-time-csf)',\ntype: 'mpd' }}","other-protocols#Other protocols":"The following other types are supported on some platforms, but aren't fully documented yet:\ncontent://, ms-appx://, ms-appdata://, assets-library://","using-drm-content#Using DRM content":"To setup DRM please follow this guideExample:\n {\n description: 'WV: Secure SD & HD (cbcs,MP4,H264)',\n uri: 'https://storage.googleapis.com/wvmedia/cbcs/h264/tears/tears_aes_cbcs.mpd',\n drm: {\n type: DRMType.WIDEVINE,\n licenseServer:\n 'https://proxy.uat.widevine.com/proxy?provider=widevine_test',\n },\n },","start-playback-at-a-specific-point-in-time#Start playback at a specific point in time":"Provide an optional startPosition for video. Value is in milliseconds. If the cropStart prop is applied, it will be applied from that point forward.\n(If it is negative or undefined or null, it is ignored)","playing-only-a-portion-of-the-video-start--end-time#Playing only a portion of the video (start & end time)":"Provide an optional cropStart and/or cropEnd for the video. Value is in milliseconds. Useful when you want to play only a portion of a large video.Example\nsource={{ uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', cropStart: 36012, cropEnd: 48500 }}\nsource={{ uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', cropStart: 36012 }}\nsource={{ uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', cropEnd: 48500 }}","overriding-the-metadata-of-a-source#Overriding the metadata of a source":"Provide an optional title, subtitle, artist, imageUri and/or description properties for the video.\nUseful when using notification controls on Android or iOS or to adapt the tvOS playback experience.Example:\nsource={{\n uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',\n metadata: {\n title: 'Custom Title',\n subtitle: 'Custom Subtitle',\n artist: 'Custom Artist',\n description: 'Custom Description',\n imageUri: 'https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png'\n }\n }}","ad#ad":"Sets the ad configuration.Example:\nad: {\n 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=\"\n adLanguage=\"fr\"\n}\nSee: [./ads.md] for more informationsNote: You need enable IMA SDK in gradle or pod file - enable client side ads insertion","contentstarttime-1#contentStartTime":"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.\nNote: This feature only works on DASH streams","texttracksallowchunklesspreparation#textTracksAllowChunklessPreparation":"AllowChunklessPreparation for hls media source.\nsee: disabling-chunkless in android documentation.Default value: true.\nsource={{\n uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',\n textTracksAllowChunklessPreparation: false,\n }}","bufferconfig-1#bufferConfig":"Adjust the buffer settings. This prop takes an object with one or more of the properties listed below.\nProperty\tType\tDescription\tminBufferMs\tnumber\tThe default minimum duration of media that the player will attempt to ensure is buffered at all times, in milliseconds.\tmaxBufferMs\tnumber\tThe default maximum duration of media that the player will attempt to buffer, in milliseconds.\tbufferForPlaybackMs\tnumber\tThe default duration of media that must be buffered for playback to start or resume following a user action such as a seek, in milliseconds.\tbufferForPlaybackAfterRebufferMs\tnumber\tThe default duration of media that must be buffered for playback to resume after a rebuffer, in milliseconds. A rebuffer is defined to be caused by buffer depletion rather than a user action.\tbackBufferDurationMs\tnumber\tThe number of milliseconds of buffer to keep before the current position. This allows rewinding without rebuffering within that duration.\tmaxHeapAllocationPercent\tnumber\tThe percentage of available heap that the video can use to buffer, between 0 and 1\tminBackBufferMemoryReservePercent\tnumber\tThe percentage of available app memory at which during startup the back buffer will be disabled, between 0 and 1\tminBufferMemoryReservePercent\tnumber\tThe percentage of available app memory to keep in reserve that prevents buffer from using it, between 0 and 1\tcacheSizeMB\tnumber\tCache size in MB, enabling this to prevent new src requests and save bandwidth while repeating videos, or 0 to disable. Android only.\tlive\tobject\tObject containing another config set for live playback configuration, see next table\t\nDescription of live object:\nProperty\tType\tDescription\tmaxPlaybackSpeed\tnumber\tThe maximum playback speed the player can use to catch up when trying to reach the target live offset.\tminPlaybackSpeed\tnumber\tThe minimum playback speed the player can use to fall back when trying to reach the target live offset.\tmaxOffsetMs\tnumber\tThe maximum allowed live offset. Even when adjusting the offset to current network conditions, the player will not attempt to get above this offset during playback.\tminOffsetMs\tnumber\tThe minimum allowed live offset. Even when adjusting the offset to current network conditions, the player will not attempt to get below this offset during playback.\ttargetOffsetMs\tnumber\tThe target live offset. The player will attempt to get close to this live offset during playback if possible.\t\nFor android, more informations about live configuration can be find hereExample with default values:\nbufferConfig={{\n minBufferMs: 15000,\n maxBufferMs: 50000,\n bufferForPlaybackMs: 2500,\n bufferForPlaybackAfterRebufferMs: 5000,\n backBufferDurationMs: 120000,\n cacheSizeMB: 0,\n live: {\n targetOffsetMs: 500,\n },\n}}\nPlease note that the Android cache is a global cache that is shared among all components; individual components can still opt out of caching behavior by setting cacheSizeMB to 0, but multiple components with a positive cacheSizeMB will be sharing the same one, and the cache size will always be the first value set; it will not change during the app's lifecycle.","minloadretrycount-1#minLoadRetryCount":"Sets the minimum number of times to retry loading data before failing and reporting an error to the application. Useful to recover from transient internet failures.Default: 3. Retry 3 times.Example:\nsource={{\n uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',\n minLoadRetryCount={5} // retry 5 times\n}}","texttracks#textTracks":"Load one or more \"sidecar\" text tracks. This takes an array of objects representing each track. Each object should have the format:\n⚠️ This feature does not work with HLS playlists (e.g m3u8) on iOS\nProperty\tDescription\ttitle\tDescriptive name for the track\tlanguage\t2 letter ISO 639-1 code representing the language\ttype\tMime type of the track _ TextTrackType.SUBRIP - SubRip (.srt) _ TextTrackType.TTML - TTML (.ttml) * TextTrackType.VTT - WebVTT (.vtt)iOS only supports VTT, Android supports all 3\turi\tURL for the text track. Currently, only tracks hosted on a webserver are supported\t\nOn 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:\nimport { TextTrackType }, Video from 'react-native-video';\ntextTracks={[\n {\n title: \"English CC\",\n language: \"en\",\n type: TextTrackType.VTT, // \"text/vtt\"\n uri: \"https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt\"\n },\n {\n title: \"Spanish Subtitles\",\n language: \"es\",\n type: TextTrackType.SUBRIP, // \"application/x-subrip\"\n uri: \"https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt\"\n }\n]}","subtitlestyle#subtitleStyle":"Property\tPlatform\tDescription\tPlatforms\tfontSize\tAndroid\tAdjust the font size of the subtitles. Default: font size of the device\tAndroid\tpaddingTop\tAndroid\tAdjust the top padding of the subtitles. Default: 0\tAndroid\tpaddingBottom\tAndroid\tAdjust the bottom padding of the subtitles. Default: 0\tAndroid\tpaddingLeft\tAndroid\tAdjust the left padding of the subtitles. Default: 0\tAndroid\tpaddingRight\tAndroid\tAdjust the right padding of the subtitles. Default: 0\tAndroid\topacity\tAndroid, iOS\tAdjust 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.\tAndroid, iOS\tsubtitlesFollowVideo\tAndroid\tBoolean to adjust position of subtitles. Default: true\t\nExample:\nsubtitleStyle={{ paddingBottom: 50, fontSize: 20, opacity: 0 }}\nNote for subtitlesFollowVideosubtitlesFollowVideo helps to determine how the subtitles are positionned.\nTo understand this prop you need to understand how views management works.\nThe main View style passed to react native video is the position reserved to display the video component.\nIt may not match exactly the real video size.\nFor exemple, you can pass a 4:3 video view and render a 16:9 video inside.\nSo 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.\nWhen putting subtitlesFollowVideo to true, the subtitle view will be adapt to the video view.\nIt means that if the video is displayed out of screen, the subtitles may also be displayed out of screen.\nWhen putting subtitlesFollowVideo to false, the subtitle view will keep adapting to the main view.\nIt means that if the video is displayed out of screen, the subtitles may also be displayed out of screen.\nThis prop can be changed on runtime.","texttracks-1#textTracks":"[!WARNING]\ndeprecated, use source.textTracks instead. changing text tracks will restart playback\nLoad one or more \"sidecar\" text tracks. This takes an array of objects representing each track. Each object should have the format:\n⚠️ This feature does not work with HLS playlists (e.g m3u8) on iOS\nProperty\tDescription\ttitle\tDescriptive name for the track\tlanguage\t2 letter ISO 639-1 code representing the language\ttype\tMime type of the track _ TextTrackType.SUBRIP - SubRip (.srt) _ TextTrackType.TTML - TTML (.ttml) * TextTrackType.VTT - WebVTT (.vtt)iOS only supports VTT, Android supports all 3\turi\tURL for the text track. Currently, only tracks hosted on a webserver are supported\t\nOn 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:\nimport { TextTrackType }, Video from 'react-native-video';\ntextTracks={[\n {\n title: \"English CC\",\n language: \"en\",\n type: TextTrackType.VTT, // \"text/vtt\"\n uri: \"https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt\"\n },\n {\n title: \"Spanish Subtitles\",\n language: \"es\",\n type: TextTrackType.SUBRIP, // \"application/x-subrip\"\n uri: \"https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt\"\n }\n]}","shownotificationcontrols#showNotificationControls":"Controls whether to show media controls in the notification area.\nFor Android each Video component will have its own notification controls and for 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 propably want also 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 metadata property in the source prop.\nfalse (default) - Don't show media controls in the notification area\ntrue - Show media controls in the notification area\nTo 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:\n\n ...\n \n \n ...\n \n ...\n \n \n \n \n \n \n ","usesecureview#useSecureView":"[!WARNING]\ndeprecated, use viewType instead\nForce the output to a SurfaceView and enables the secure surface.This will override useTextureView flag.SurfaceView is is the only one that can be labeled as secure.\ntrue - Use security\nfalse (default) - Do not use security","usetextureview#useTextureView":"[!WARNING]\ndeprecated, use viewType instead\nControls whether to output to a TextureView or SurfaceView.SurfaceView is more efficient and provides better performance but has two limitations:\nIt can't be animated, transformed or scaled\nYou can't overlay multiple SurfaceViews\nuseTextureView can only be set at same time you're setting the source.\ntrue (default) - Use a TextureView\nfalse - Use a SurfaceView","viewtype#viewType":"Allow to explicitly specify view type.\nThis flag replace useSecureView and useTextureView fields.\nThere are 3 available values:\n'textureView': The video is rendered in a texture view. it allows mapping the view on a texture (useful for 3D).\nDRM playback is not supported on textureView, if drm prop is provided, the suface will be transformed to a SurfaceView.\n'surfaceView' (default): The video is rendered in a surface. take less resources to be rendered.\n'secureView': The video is rendered in a surface which disallow taking screenshot of the video","volume#volume":"Adjust the volume.\n1.0 (default) - Play at full volume\n0.0 - Mute the audio\nOther values - Reduce volume","cmcd#cmcd":"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.\nfalse (default) - Don't use CMCD\ntrue - Use default CMCD configuration\nobject - Use custom CMCD configuration\nWhen providing an object, you can configure the following properties:\nProperty\tType\tDescription\tmode\tCmcdMode\tThe mode for sending CMCD data\trequest\tCmcdData\tCustom key-value pairs for the request object\tsession\tCmcdData\tCustom key-value pairs for the session object\tobject\tCmcdData\tCustom key-value pairs for the object metadata\tstatus\tCmcdData\tCustom key-value pairs for the status information\t\nNote: The mode property defaults to CmcdMode.MODE_QUERY_PARAMETER if not specified.","cmcdmode#CmcdMode":"CmcdMode is an enum that defines how CMCD data should be sent:\nCmcdMode.MODE_REQUEST_HEADER (0) - Send CMCD data in the HTTP request headers.\nCmcdMode.MODE_QUERY_PARAMETER (1) - Send CMCD data as query parameters in the URL.","cmcddata#CmcdData":"CmcdData is a type representing custom key-value pairs for CMCD data. It's defined as:\ntype CmcdData = Record<`${string}-${string}`, string | number>;\nCustom key names MUST include a hyphenated prefix to prevent namespace collisions. It's recommended to use a reverse-DNS syntax for custom prefixes.Example:\n "}}}
\ No newline at end of file
+{"/component/ads":{"title":"Ads","data":{"ima-sdk#IMA SDK":"react-native-video has built-in support for Google IMA SDK for Android and iOS. To enable it please refer to installation section","usage#Usage":"To use AVOD, you need to pass adTagUrl prop to Video component. adTagUrl is a VAST uri.Example:\nadTagUrl=\"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=\"\nNOTE: Video ads cannot start when you are using the PIP on iOS (more info available at Google IMA SDK Docs). If you are using custom controls, you must hide your PIP button when you receive the STARTED event from onReceiveAdEvent and show it again when you receive the ALL_ADS_COMPLETED event.","events#Events":"To receive events from IMA SDK, you need to pass onReceiveAdEvent prop to Video component. List of events, you can find hereExample:\n...\nonReceiveAdEvent={event => console.log(event)}\n...","localization#Localization":"To change the language of the IMA SDK, you need to pass adLanguage prop to Video component. List of supported languages, you can find hereBy default, ios will use system language and android will use enExample:\n...\nadLanguage=\"fr\"\n..."}},"/component/drm":{"title":"DRM","data":{"drm-example#DRM Example":"We have available example for DRM usage in the example app.\nTo get token needed for DRM playback you can go to our site and get it.","provide-drm-data-only-tested-with-httphttps-assets#Provide DRM data (only tested with http/https assets)":"You can provide some configuration to allow DRM playback.\nThis feature will disable the use of TextureView on Android.DRM object allows this members:","base64certificate#base64Certificate":"Type: bool\nDefault: falseWhether or not the certificate url returns it on base64.","certificateurl#certificateUrl":"Type: string\nDefault: undefinedURL to fetch a valid certificate for FairPlay.","getlicense#getLicense":"Type: function\nDefault: undefinedRather 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 streamlicenseServer and headers will be ignored. You will obtain as argument the SPC\n(as ASCII string, you will probably need to convert it to base 64) obtained from\nyour contentId + the provided certificate via objc [loadingRequest streamingContentKeyRequestDataForApp:certificateData\ncontentIdentifier:contentIdData options:nil error:&spcError]; Also, you will receive following parameter of getLicense:\ncontentId contentId if passed to drm object or loadingRequest.request.url?.host\nloadedLicenseUrl URL defined as loadingRequest.request.URL.absoluteString, this url starts with skd:// or clearkey://\nlicenseServer prop if prop is passed to drm object.\nspcString the SPC used to validate playback with drm server\nYou 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:\ngetLicense: (spcString, contentId, licenseUrl, loadedLicenseUrl) => {\n const base64spc = Base64.encode(spcString);\n const formData = new FormData();\n formData.append('spc', base64spc);\n return fetch(`https://license.pallycon.com/ri/licenseManager.do`, {\n method: 'POST',\n headers: {\n 'pallycon-customdata-v2':\n '==',\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: formData,\n })\n .then((response) => response.text())\n .then((response) => {\n return response;\n })\n .catch((error) => {\n console.error('Error', error);\n });\n};","contentid#contentId":"Type: string\nDefault: undefinedSpecify 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)","headers#headers":"Type: Object\nDefault: undefinedYou can customize headers send to the licenseServer.Example:\nsource={{\n uri: 'https://media.axprod.net/TestVectors/v7-MultiDRM-SingleKey/Manifest_1080p.mpd',\n}}\ndrm={{\n type: DRMType.WIDEVINE,\n licenseServer: 'https://drm-widevine-licensing.axtest.net/AcquireLicense',\n headers: {\n 'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..FAbIiPxX8BHi9RwfzD7Yn-wugU19ghrkBFKsaCPrZmU'\n },\n}}","licenseserver#licenseServer":"Type: string\nDefault: falseThe URL pointing to the licenseServer that will provide the authorization to play the protected stream.","multidrm#multiDrm":"Type: boolean\nDefault: falseIndicates that drm system shall support key rotation, see: https://developer.android.google.cn/media/media3/exoplayer/drm?hl=en#key-rotation","type#type":"Type: DRMType\nDefault: undefinedYou can specify the DRM type, either by string or using the exported DRMType enum.\nValid values are, for Android: DRMType.WIDEVINE / DRMType.PLAYREADY / DRMType.CLEARKEY.\nfor iOS: DRMType.FAIRPLAY","localsourceencryptionkeyscheme#localSourceEncryptionKeyScheme":"Set the url scheme for stream encryption key for local assetsType: StringExample:\nlocalSourceEncryptionKeyScheme=\"my-offline-key\"","common-usage-scenarios#Common Usage Scenarios":"","send-cookies-to-license-server#Send cookies to license server":"You can send Cookies to the license server via headers prop. Example:\ndrm: {\n type: DRMType.WIDEVINE\n licenseServer: 'https://drm-widevine-licensing.axtest.net/AcquireLicense',\n headers: {\n 'Cookie': 'PHPSESSID=etcetc; csrftoken=mytoken; _gat=1; foo=bar'\n },\n}","custom-license-acquisition-only-ios-for-now#Custom License Acquisition (only iOS for now)":"drm: {\n type: DRMType.FAIRPLAY,\n getLicense: (spcString) => {\n const base64spc = Base64.encode(spcString);\n return fetch('YOUR LICENSE SERVER HERE', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n Accept: 'application/json',\n },\n body: JSON.stringify({\n getFairplayLicense: {\n foo: 'bar',\n spcMessage: base64spc,\n }\n })\n })\n .then(response => response.json())\n .then((response) => {\n if (response && response.getFairplayLicenseResponse\n && response.getFairplayLicenseResponse.ckcResponse) {\n return response.getFairplayLicenseResponse.ckcResponse;\n }\n throw new Error('No correct response');\n })\n .catch((error) => {\n console.error('CKC error', error);\n });\n }\n}"}},"/component/events":{"title":"Events","data":{"":"This page shows the list of available callbacks to handle player notifications","details#Details":"","onaudiobecomingnoisy#onAudioBecomingNoisy":"Callback function that is called when the audio is about to become 'noisy' due to\na change in audio outputs. Typically this is called when audio output is being switched\nfrom an external source like headphones back to the internal speaker. It's a good\nidea to pause the media when this happens so the speaker doesn't start blasting sound.Payload: none","onaudiofocuschanged#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:\nProperty\tType\tDescription\thasAudioFocus\tboolean\tBoolean indicating whether the media has audio focus\t\nExample:\n{\n hasAudioFocus: true;\n}","onaudiotracks#onAudioTracks":"Callback function that is called when audio tracks changePayload:An array of\nProperty\tType\tDescription\tindex\tnumber\tInternal track ID\ttitle\tstring\tDescriptive name for the track\tlanguage\tstring\t2 letter ISO 639-1 code representing the language\tbitrate\tnumber\tbitrate of track\ttype\tstring\tMime type of track\tselected\tboolean\ttrue if track is playing\t\nExample:\n{\n audioTracks: [\n { language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0, selected: true },\n { language: 'en', title: 'English', type: 'audio/mpeg', index: 1 }\n ];\n}","onbandwidthupdate#onBandwidthUpdate":"Callback function that is called when the available bandwidth changes.Payload:\nProperty\tType\tDescription\tbitrate\tnumber\tThe estimated bitrate in bits/sec\twidth\tnumber\tThe width of the video (android only)\theight\tnumber\tThe height of the video (android only)\ttrackId\tstring\tThe track ID of the video track (android only)\t\nExample on iOS:\n{\n bitrate: 1000000;\n}\nExample on Android:\n{\n bitrate: 1000000;\n width: 1920;\n height: 1080;\n trackId: 'some-track-id';\n}\nNote: On Android, you must set the reportBandwidth prop to enable this event. This is due to the high volume of events generated.","onbuffer#onBuffer":"Callback function that is called when the player buffers.Payload:\nProperty\tType\tDescription\tisBuffering\tboolean\tBoolean indicating whether buffering is active\t\nExample:\n{\n isBuffering: true;\n}","oncontrolsvisibilitychange#onControlsVisibilityChange":"Callback function that is called when the controls are hidden or shown. Not possible on iOS.Payload:\nProperty\tType\tDescription\tisVisible\tboolean\tBoolean indicating whether controls are visible\t\nExample:\n{\n isVisible: true;\n}","onend#onEnd":"Callback function that is called when the player reaches the end of the media.Payload: none","onerror#onError":"Callback function that is called when the player experiences a playback error.Payload:\nProperty\tType\tDescription\terror\tobject\tObject containing properties with information about the error","onexternalplaybackchange#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:\nProperty\tType\tDescription\tisExternalPlaybackActive\tboolean\tBoolean indicating whether external playback mode is active\t\nExample:\n{\n isExternalPlaybackActive: true;\n}","onfullscreenplayerwillpresent#onFullscreenPlayerWillPresent":"Callback function that is called when the player is about to enter fullscreen mode.Payload: none","onfullscreenplayerdidpresent#onFullscreenPlayerDidPresent":"Callback function that is called when the player has entered fullscreen mode.Payload: none","onfullscreenplayerwilldismiss#onFullscreenPlayerWillDismiss":"Callback function that is called when the player is about to exit fullscreen mode.Payload: none","onfullscreenplayerdiddismiss#onFullscreenPlayerDidDismiss":"Callback function that is called when the player has exited fullscreen mode.Payload: none","onload#onLoad":"Callback function that is called when the media is loaded and ready to play.NOTE: tracks (audioTracks, textTracks & videoTracks) are not available on the web.Payload:\nProperty\tType\tDescription\tcurrentTime\tnumber\tTime in seconds where the media will start\tduration\tnumber\tLength of the media in seconds\tnaturalSize\tobject\tProperties: _ width - Width in pixels that the video was encoded at _ height - Height in pixels that the video was encoded at * orientation - \"portrait\", \"landscape\" or \"square\"\taudioTracks\tarray\tAn array of audio track info objects with the following properties: _ index - Index number _ title - Description of the track _ language - 2 letter ISO 639-1 or 3 letter ISO639-2 language code _ type - Mime type of track\ttextTracks\tarray\tAn array of text track info objects with the following properties: _ index - Index number _ title - Description of the track _ language - 2 letter ISO 639-1 or 3 letter ISO 639-2 language code _ type - Mime type of track\tvideoTracks\tarray\tAn array of video track info objects with the following properties: _ trackId - ID for the track _ bitrate - Bit rate in bits per second _ codecs - Comma separated list of codecs _ height - Height of the video * width - Width of the video\ttrackId\tstring\tProvide key information about the video track, typically including: Resolution, Bitrate.\t\nExample:\n{\n canPlaySlowForward: true,\n canPlayReverse: false,\n canPlaySlowReverse: false,\n canPlayFastForward: false,\n canStepForward: false,\n canStepBackward: false,\n currentTime: 0,\n duration: 5910.208984375,\n naturalSize: {\n height: 1080\n orientation: 'landscape'\n width: '1920'\n },\n audioTracks: [\n { language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0 },\n { language: 'en', title: 'English', type: 'audio/mpeg', index: 1 }\n ],\n textTracks: [\n { title: '#1 French', language: 'fr', index: 0, type: 'text/vtt' },\n { title: '#2 English CC', language: 'en', index: 1, type: 'text/vtt' },\n { title: '#3 English Director Commentary', language: 'en', index: 2, type: 'text/vtt' }\n ],\n videoTracks: [\n { index: 0, bitrate: 3987904, codecs: \"avc1.640028\", height: 720, trackId: \"f1-v1-x3\", width: 1280 },\n { index: 1, bitrate: 7981888, codecs: \"avc1.640028\", height: 1080, trackId: \"f2-v1-x3\", width: 1920 },\n { index: 2, bitrate: 1994979, codecs: \"avc1.4d401f\", height: 480, trackId: \"f3-v1-x3\", width: 848 }\n ],\n trackId: \"720p 2400kbps\"\n}","onloadstart#onLoadStart":"Callback function that is called when the media starts loading.Payload:\nProperty\tType\tDescription\tisNetwork\tboolean\tBoolean indicating if the media is being loaded from the network\ttype\tstring\tType of the media. Not available on Windows\turi\tstring\tURI for the media source. Not available on Windows\t\nExample:\n{\n isNetwork: true,\n type: '',\n uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'\n}","onplaybackstatechanged#onPlaybackStateChanged":"Callback function that is called when the playback state changes.Payload:\nProperty\tType\tDescription\tisPlaying\tboolean\tBoolean indicating if the media is playing or not\tisSeeking\tboolean\tBoolean indicating if the player is seeking or not\t\nExample:\n{\n isPlaying: true,\n isSeeking: false\n}","onpictureinpicturestatuschanged#onPictureInPictureStatusChanged":"Callback function that is called when picture in picture becomes active or inactive.\nProperty\tType\tDescription\tisActive\tboolean\tBoolean indicating whether picture in picture is active\t\nExample:\n{\n isActive: true;\n}","onplaybackratechange#onPlaybackRateChange":"Callback function that is called when the rate of playback changes - either paused or starts/resumes.\nProperty\tType\tDescription\tplaybackRate\tnumber\t0 when playback is paused, 1 when playing at normal speed. Other values when playback is slowed down or sped up\t\nExample:\n{\n playbackRate: 0, // indicates paused\n}","onprogress#onProgress":"Callback function that is called every progressUpdateInterval milliseconds with info about which position the media is currently playing.\nProperty\tType\tDescription\tcurrentTime\tnumber\tCurrent position in seconds\tplayableDuration\tnumber\tPosition to where the media can be played to using just the buffer in seconds\tseekableDuration\tnumber\tPosition to where the media can be seeked to in seconds. Typically, the total length of the media\t\nExample:\n{\n currentTime: 5.2,\n playableDuration: 34.6,\n seekableDuration: 888\n}","onreadyfordisplay#onReadyForDisplay":"Callback function that is called when the first video frame is ready for display. This is when the poster is removed.Payload: none\niOS: readyForDisplay\nAndroid STATE_READY","onreceiveadevent#onReceiveAdEvent":"Callback function that is called when an AdEvent is received from the IMA's SDK.Enum AdEvent possible values for Android and iOS:\nEvents\nEvent\tPlatform\tDescription\tAD_BREAK_ENDED\tiOS\tFired the first time each ad break ends. Applications must reenable seeking when this occurs (only used for dynamic ad insertion).\tAD_BREAK_READY\tAndroid, iOS\tFires when an ad rule or a VMAP ad break would have played if autoPlayAdBreaks is false.\tAD_BREAK_STARTED\tiOS\tFired 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).\tAD_BUFFERING\tAndroid\tFires when the ad has stalled playback to buffer.\tAD_CAN_PLAY\tAndroid\tFires when the ad is ready to play without buffering, either at the beginning of the ad or after buffering completes.\tAD_METADATA\tAndroid\tFires when an ads list is loaded.\tAD_PERIOD_ENDED\tiOS\tFired 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).\tAD_PERIOD_STARTED\tiOS\tFired 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).\tAD_PROGRESS\tAndroid\tFires when the ad's current time value changes. The event data will be populated with an AdProgressData object.\tALL_ADS_COMPLETED\tAndroid, iOS\tFires 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.\tCLICK\tAndroid, iOS\tFires when the ad is clicked.\tCOMPLETED\tAndroid, iOS\tFires when the ad completes playing.\tCONTENT_PAUSE_REQUESTED\tAndroid\tFires when content should be paused. This usually happens right before an ad is about to cover the content.\tCONTENT_RESUME_REQUESTED\tAndroid\tFires when content should be resumed. This usually happens when an ad finishes or collapses.\tCUEPOINTS_CHANGED\tiOS\tCuepoints changed for VOD stream (only used for dynamic ad insertion).\tDURATION_CHANGE\tAndroid\tFires when the ad's duration changes.\tERROR\tAndroid, iOS\tFires when an error occurred while loading the ad and prevent it from playing.\tFIRST_QUARTILE\tAndroid, iOS\tFires when the ad playhead crosses first quartile.\tIMPRESSION\tAndroid\tFires when the impression URL has been pinged.\tINTERACTION\tAndroid\tFires when an ad triggers the interaction callback. Ad interactions contain an interaction ID string in the ad data.\tLINEAR_CHANGED\tAndroid\tFires when the displayed ad changes from linear to nonlinear, or the reverse.\tLOADED\tAndroid, iOS\tFires when ad data is available.\tLOG\tAndroid, iOS\tFires 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.\tMIDPOINT\tAndroid, iOS\tFires when the ad playhead crosses midpoint.\tPAUSED\tAndroid, iOS\tFires when the ad is paused.\tRESUMED\tAndroid, iOS\tFires when the ad is resumed.\tSKIPPABLE_STATE_CHANGED\tAndroid\tFires when the displayed ads skippable state is changed.\tSKIPPED\tAndroid, iOS\tFires when the ad is skipped by the user.\tSTARTED\tAndroid, iOS\tFires when the ad starts playing.\tSTREAM_LOADED\tiOS\tStream request has loaded (only used for dynamic ad insertion).\tTAPPED\tiOS\tFires when the ad is tapped.\tTHIRD_QUARTILE\tAndroid, iOS\tFires when the ad playhead crosses third quartile.\tUNKNOWN\tiOS\tAn unknown event has fired\tUSER_CLOSE\tAndroid\tFires when the ad is closed by the user.\tVIDEO_CLICKED\tAndroid\tFires when the non-clickthrough portion of a video ad is clicked.\tVIDEO_ICON_CLICKED\tAndroid\tFires when a user clicks a video icon.\tVOLUME_CHANGED\tAndroid\tFires when the ad volume has changed.\tVOLUME_MUTED\tAndroid\tFires when the ad volume has been muted.\t\nPayload:\nProperty\tType\tDescription\tevent\tAdEvent\tThe ad event received\tdata\tRecord | undefined\tThe ad event data\t\nExample:\n{\n \"data\": {\n \"key\": \"value\"\n },\n \"event\": \"LOG\"\n}","onrestoreuserinterfaceforpictureinpicturestop#onRestoreUserInterfaceForPictureInPictureStop":"Callback function that corresponds to Apple's . Call inside of this function when done restoring the user interface.Payload: none","onseek#onSeek":"Callback function that is called when a seek completes.Payload:\nProperty\tType\tDescription\tcurrentTime\tnumber\tThe current time after the seek\tseekTime\tnumber\tThe requested time\t\nExample:\n{\n currentTime: 100.5;\n seekTime: 100;\n}\nBoth the currentTime & seekTime are reported because the video player may not seek to the exact requested position in order to improve seek performance.Note: on iOS, when controls are enable, this callback is not reported. This is a known limitation.","ontimedmetadata#onTimedMetadata":"Callback function that is called when timed metadata becomes availablePayload:\nProperty\tType\tDescription\tmetadata\tarray\tArray of metadata objects\t\nExample:\n{\n metadata: [\n {value: 'Streaming Encoder', identifier: 'TRSN'},\n {value: 'Internet Stream', identifier: 'TRSO'},\n {value: 'Any Time You Like', identifier: 'TIT2'},\n ];\n}","ontexttrackdatachanged#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:\nProperty\tType\tDescription\tsubtitleTracks\tstring\tThe subtitles text content in a compatible format.\t\nExample:\n{\n subtitleTracks: \"This blade has a dark past.\",\n}\nFor details on how to control the visibility of subtitles, see the subtitleStyle section.","ontexttracks#onTextTracks":"Callback function that is called when text tracks changePayload:\nProperty\tType\tDescription\tindex\tnumber\tInternal track ID\ttitle\tstring\tDescriptive name for the track\tlanguage\tstring\t2 letter ISO 639-1 code representing the language\ttype\tstring\tMime type of the track _ TextTrackType.SRT - SubRip (.srt) _ TextTrackType.TTML - TTML (.ttml) * TextTrackType.VTT - WebVTT (.vtt)iOS only supports VTT, Android supports all 3\tselected\tboolean\ttrue if track is playing\t\nExample:\n{\n textTracks: [\n {\n index: 0,\n title: 'Any Time You Like',\n type: 'srt',\n selected: true,\n },\n ];\n}","onvideotracks#onVideoTracks":"Callback function that is called when video tracks changePayload:\nProperty\tType\tDescription\tindex\tnumber\tindex of the track\ttrackId\tstring\tInternal track ID\tcodecs\tstring\tMimeType of codec used for this track\twidth\tnumber\tTrack width\theight\tnumber\tTrack height\tbitrate\tnumber\tBitrate in bps\tselected\tboolean\ttrue if track is selected for playing\trotation\tnumber\t0, 90, 180 or 270 rotation to apply to the track (android only)\t\nExample:\n{\n videoTracks: [\n {\n index: O,\n trackId: \"0\",\n codecs: 'video/mp4',\n width: 1920,\n height: 1080,\n bitrate: 10000,\n selected: true,\n rotation: 0,\n },\n ];\n}","onvolumechange#onVolumeChange":"Callback function that is called when the volume of player changes.\nNote: This event applies to the volume of the player, not the volume of the device.\nPayload:\nProperty\tType\tDescription\tvolume\tnumber\tThe volume of the player (between 0 and 1)\t\nExample:\n{\n volume: 0.5;\n}"}},"/component/methods":{"title":"Methods","data":{"":"This page shows the list of available methods","dismissfullscreenplayer#dismissFullscreenPlayer":"dismissFullscreenPlayer(): PromiseTake the player out of fullscreen mode.\n[!WARNING]\ndeprecated, use setFullScreen method instead","pause#pause":"pause(): PromisePause the video.","presentfullscreenplayer#presentFullscreenPlayer":"presentFullscreenPlayer(): PromisePut the player in fullscreen mode.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.\n[!WARNING]\ndeprecated, use setFullScreen method instead","resume#resume":"resume(): PromiseResume the video.","restoreuserinterfaceforpictureinpicturestopcompleted#restoreUserInterfaceForPictureInPictureStopCompleted":"(restored)This function corresponds to the completion handler in Apple's restoreUserInterfaceForPictureInPictureStop. IMPORTANT: This function must be called after onRestoreUserInterfaceForPictureInPictureStop is called.","save#save":"save(): Promise<{ uri: string }>Save video to your Photos with current filter prop. Returns promise.Notes:\nCurrently only supports highest quality export\nCurrently only supports MP4 export\nCurrently only supports exporting to user's cache directory with a generated UUID filename.\nUser will need to remove the saved video through their Photos app\nWorks with cached videos as well. (Checkout video-caching example)\nIf the video is has not began buffering (e.g. there is no internet connection) then the save function will throw an error.\nIf the video is buffering then the save function promise will return after the video has finished buffering and processing.\nFuture:\nWill support multiple qualities through options\nWill support more formats in the future through options\nWill support custom directory and file name through options","seek#seek":"seek(seconds)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 event will be called.","exact-seek#Exact seek":"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)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.","setvolume#setVolume":"setVolume(value): PromiseThis function will change the volume exactly like volume property. default value and range are the same then.","getcurrentposition#getCurrentPosition":"getCurrentPosition(): PromiseThis function retrieves and returns the precise current position of the video playback, measured in seconds.\nThis function will throw an error if player is not initialized.","setsource#setSource":"setSource(source: ReactVideoSource): PromiseThis function will change the source exactly like source property.\nChanging source with this function will overide source provided as props.","setfullscreen#setFullScreen":"setFullScreen(fullscreen): PromiseIf you set it to true, the player enters fullscreen mode. If you set it to false, the player exits fullscreen mode.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.","nativehtmlvideoref#nativeHtmlVideoRef":"A ref to the underlying html video element. This can be used if you need to integrate a 3d party, web only video library (like hls.js, shaka, video.js...).","example-usage#Example Usage":"const videoRef = useRef(null);\nconst someCoolFunctions = async () => {\n if (!videoRef.current) {\n return;\n }\n // present or dismiss fullscreen player\n videoRef.current.presentFullscreenPlayer();\n videoRef.current.dismissFullscreenPlayer();\n // pause or resume the video\n videoRef.current.pause();\n videoRef.current.resume();\n // save video to your Photos with current filter prop\n const response = await videoRef.current.save();\n const path = response.uri;\n // seek to the specified position represented by seconds\n videoRef.current.seek(200);\n // or on iOS you can seek with tolerance\n videoRef.current.seek(200, 10);\n};\nreturn (\n \n);","static-methods#Static methods":"","getwidevinelevel#getWidevineLevel":"Indicates whether the widevine level supported by device.Possible values are:\n0 - unable to determine widevine support (typically not supported)\n1, 2, 3 - Widevine level supported","iscodecsupported#isCodecSupported":"Indicates whether the provided codec is supported level supported by device.parameters:\nmimetype: mime type of codec to query\nwidth, height: resolution to query\nPossible results:\nhardware - codec is supported by hardware\nsoftware - codec is supported by software only\nunsupported - codec is not supported","ishevcsupported#isHEVCSupported":"Helper which Indicates whether the provided HEVC/1920*1080 is supported level supported by device. It uses isCodecSupported internally.","example-usage-1#Example Usage":"import { VideoDecoderProperties } from 'react-native-video';\nVideoDecoderProperties.getWidevineLevel().then((level) => {\n ...\n});\nVideoDecoderProperties.isCodecSupported('video/hevc', 1920, 1080).then((support) => {\n ...\n});\nVideoDecoderProperties.isHEVCSupported().then((support) => {\n ...\n});"}},"/":{"title":"A component for React Native","data":{"about#About":"react-native-video is a React Native library that provides a Video component that renders media content such as videos and streamsIt allows to stream video files (m3u, mpd, mp4, ...) inside your react native application.\nExoplayer for android\nAVplayer for iOS, tvOS and visionOS\nWindows UWP for windows\nHTML5 for web\nTrick mode support\nSubtitles (embeded or side loaded)\nDRM support\nClient side Ads insertion (via google IMA)\nPip (ios)\nEmbedded playback controls\nAnd much more\nThe aim of this package is to have a thin and exhaustive control of player.","v600-information#V6.0.0 Information":"⚠️ Version 6: The following documentation refer to features only available through the v6.0.0 releases.\nAs major rework has been done in case of doubt, you can still use version 5.2.x, see documentation\nVersion 6.x requires react-native >= 0.68.2\n⚠️ from 6.0.0-beta.8 requires also iOS >= 13.0 (default in react-native 0.73)\nFor older versions of react-native, please use version 5.x.","usage#Usage":"// Load the module\nimport Video, {VideoRef} from 'react-native-video';\n// Within your render function, assuming you have a file called\n// \"background.mp4\" in your project. You can include multiple videos\n// on a single screen if you like.\nconst VideoPlayer = () => {\n const videoRef = useRef(null);\n const background = require('./background.mp4');\n return (\n \n )\n}\n// Later on in your styles..\nvar styles = StyleSheet.create({\n backgroundVideo: {\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n },\n});"}},"/installation":{"title":"Installation","data":{"":"Using npm:\nnpm install --save react-native-video\nor using yarn:\nyarn add react-native-video\nThen follow the instructions for your platform to link react-native-video into your project","ios#iOS":"","standard-method#Standard Method":"Run pod install in the ios directory of your project.⚠️ from version 6.0.0 the minimum iOS version required is 13.0. For more information see updating section","enable-custom-feature-in-podfile-file#Enable custom feature in podfile file":"Samples available in sample app see sample pod file","video-caching#Video caching":"To enable Video caching usage, add following line in your podfile:\n(more info here)\n# enable Video caching\n+ $RNVideoUseVideoCaching=true","google-ima#Google IMA":"Google IMA is the google SDK to support Client Side Ads Integration (CSAI), see google documentation for more information.To enable google IMA usage define add following line in your podfile:\n$RNVideoUseGoogleIMA=true\nIf you are using Expo you can use expo plugin for it","android#Android":"From version >= 6.0.0, your application needs to have kotlin version >= 1.8.0\nbuildscript {\n ...\n ext.kotlinVersion = '1.8.0',\n ext.compileSdkVersion = 34\n ext.targetSdkVersion = 34\n ...\n}","enable-custom-feature-in-gradle-file#Enable custom feature in gradle file":"If you are using Expo you can use expo plugin for itYou can disable or enable the following features by setting the following variables in your android/build.gradle file:\nuseExoplayerIMA - Enable Google IMA SDK (Ads support)\nuseExoplayerRtsp - Enable RTSP support\nuseExoplayerSmoothStreaming - Enable SmoothStreaming support\nuseExoplayerDash - Enable Dash support\nuseExoplayerHls - Enable HLS support\nEach of these features enabled will increase the size of your APK, so only enable the features you need.\nBy default enabled features are: useExoplayerSmoothStreaming, useExoplayerDash, useExoplayerHlsExample:\nbuildscript {\n ext {\n ...\n useExoplayerIMA = true\n useExoplayerRtsp = true\n useExoplayerSmoothStreaming = true\n useExoplayerDash = true\n useExoplayerHls = true\n ...\n }\n}\nSee sample app","windows#Windows":"","autolinking#Autolinking":"React Native Windows 0.63 and aboveAutolinking should automatically add react-native-video to your app.","manual-linking#Manual Linking":"React Native Windows 0.62Make the following additions to the given files manually:windows\\myapp.slnAdd the ReactNativeVideoCPP project to your solution (eg. windows\\myapp.sln):\nOpen your solution in Visual Studio 2019\nRight-click Solution icon in Solution Explorer > Add > Existing Project...\nSelect node_modules\\react-native-video\\windows\\ReactNativeVideoCPP\\ReactNativeVideoCPP.vcxproj\nwindows\\myapp\\myapp.vcxprojAdd a reference to ReactNativeVideoCPP to your main application project (eg. windows\\myapp\\myapp.vcxproj):\nOpen your solution in Visual Studio 2019\nRight-click main application project > Add > Reference...\nCheck ReactNativeVideoCPP from Solution Projects\npch.hAdd #include \"winrt/ReactNativeVideoCPP.h\".app.cppAdd PackageProviders().Append(winrt::ReactNativeVideoCPP::ReactPackageProvider()); before InitializeComponent();.React Native Windows 0.61 and belowFollow the manual linking instructions for React Native Windows 0.62 above, but substitute ReactNativeVideoCPP61 for ReactNativeVideoCPP.","tvos#tvOS":"react-native link react-native-video doesn’t work properly with the tvOS target so we need to add the library manually.First select your project in Xcode.After that, select the tvOS target of your application and select « General » tabScroll to « Linked Frameworks and Libraries » and tap on the + buttonSelect RCTVideo-tvOS","visionos#visionOS":"Run pod install in the visionos directory of your projectNothing to do, everything should work out of the box.Note that only basic video support is present, no hls/dash or ads/drm for now."}},"/other/caching":{"title":"Caching","data":{"":"Caching is supported on iOS platforms with a CocoaPods setup, and on android using SimpleCache.","android#Android":"Android uses a LRU SimpleCache with a variable cache size that can be specified by bufferConfig - cacheSizeMB. This creates a folder named RNVCache in the app's cache folder. Do note RNV does not yet offer a native call to flush the cache, it can be flushed by clearing the app's cache.In addition, this resolves RNV6's repeated source URI call problem when looping a video on Android.","ios#iOS":"","technology#Technology":"The cache is backed by SPTPersistentCache and DVAssetLoaderDelegate.","how-does-it-work#How Does It Work":"The caching is based on the url of the asset.\nSPTPersistentCache is a LRU (Least Recently Used) cache.","restrictions#Restrictions":"Currently, caching is only supported for URLs that end in a .mp4, .m4v, or .mov extension. In future versions, URLs that end in a query string (e.g. test.mp4?resolution=480p) will be support once dependencies allow access to the Content-Type header. At this time, HLS playlists (.m3u8) and videos that sideload text tracks are not supported and will bypass the cache.You will also receive warnings in the Xcode logs by using the debug mode. So if you are not 100% sure if your video is cached, check your Xcode logs!By default files expire after 30 days and the maximum cache size is 100mb.In a future release the cache might have more configurable options."}},"/other/debug":{"title":"Debugging","data":{"":"This page describe useful tips for debugging and investigating issue in the package or in your application.","using-the-sample-app#Using the sample app":"This repository contains multiple a sample implementation in example folder.\nIt is always preferable to test behavior on a sample app than in a full app implementation.\nThe basic sample allow to test a lot of feature.\nTo use the sample you will need to do steps:\nClone this repository: git clone git@github.com:TheWidlarzGroup/react-native-video.git\nGo to root folder and build it. It will generate a transpiled version of the package in lib folder: cd react-native-video && yarn && yarn build\nGo to the sample and install it: cd example/basic && yarn install\nBuild it ! for android yarn android for ios cd ios && pod install && cd .. && yarn ios","http-playback-doesnt-work-or--black-screen-on-release-build-android#HTTP playback doesn't work or Black Screen on Release build (Android)":"If your video work on Debug mode, but on Release you see only black screen, please, check the link to your video. If you use 'http' protocol there, you will need to add next string to your AndroidManifest.xml file. Details here\n","decoder-issue-android#Decoder Issue (Android)":"Devices have a maximum of simultaneous possible playback. It means you have reach this limit. Exoplayer returns: 'Unable to instantiate decoder'known issue: This issue happen really often in debug mode.","you-cannot-play-clean-content-all-os#You cannot play clean content (all OS)":"Here are the steps to consider before opening a ticket in issue tracker","check-you-can-access-to-remote-file#Check you can access to remote file":"Ensure you can download to manifest / content file with a browser for example","check-another-player-can-read-the-content#Check another player can read the content":"Usually clear playback can be read with all Video player. Then you should ensure content can be played without any issue with another player (VideoLan/VLC is a good reference implementation)","you-cannot-play-protected-content-all-os#You cannot play protected content (all OS)":"","protected-content-gives-error-token-error--access-forbidden#Protected content gives error (token error / access forbidden)":"If content is protected with an access token or any other http header, ensure you can access to you data with a wget call or a rest client app. You need to provide all needed access token / authentication parameters.","i-need-to-debug-network-calls-but-i-dont-see-them-in-react-native-debugging-tools#I need to debug network calls but I don't see them in react native debugging tools":"This is a react native limitation. React native tools can only see network calls done in JS.\nTo achieve that, you need to record network trace to ensure communications with server is correct.\nCharles proxy or Fiddler are a simple and useful tool to sniff all http/https calls.\nWith these tool you should be able to analyze what is going on with network. You will see all access to content and DRM, audio / video chunks, ...Then try to compare exchanges with previous tests you made.","debug-media3-build-from-media3-source#Debug media3: build from media3 source":"If you need to use a specific exoplayer version or patch default behavior, you may want to build from media3 source code.Building from media3 source is possible. You need to add 2 or 3 things in your app:","configure-player-path#Configure player path":"You need to add following lines in settings.gradle to configure your media3 source path:\ngradle.ext.androidxMediaModulePrefix = 'media-'\napply from: file(\"../../../../media3/core_settings.gradle\")\nOf course, you should replace with media3 source path. Be carefull, you need to use the same version (or version with compatible api) that the package support.","enable-building-from-source#Enable building from source":"In your build.gradle file, add following setting:\nbuildscript {\n ext {\n ...\n buildFromMedia3Source = true\n ...\n }\n}","its-still-not-working#It's still not working":"You can try to open a ticket or contact us for premium support!"}},"/other/expo":{"title":"Expo","data":{"expo-plugin#Expo plugin":"From version 6.3.1, we have added support for expo plugin. You can configure react-native-video properties in app.json (or app.config.json or app.config.js) file.\nIt's useful when you are using expo managed workflow (expo prebuild) as it will automatically configure react-native-video properties in native part of the expo project.\n// app.json\n{\n {\n \"name\": \"my app\",\n \"plugins\": [\n [\n \"react-native-video\",\n {\n // ...\n \"enableNotificationControls\": true,\n \"androidExtensions\": {\n \"useExoplayerRtsp\": false,\n \"useExoplayerSmoothStreaming\": false,\n \"useExoplayerHls\": false,\n \"useExoplayerDash\": false,\n }\n // ...\n }\n ]\n ]\n}\n}","expo-plugin-properties#Expo Plugin Properties":"Property\tType\tDefault\tDescription\tenableNotificationControls\tboolean\tfalse\tAdd required changes on android to use notification controls for video player\tenableBackgroundAudio\tboolean\tfalse\tAdd required changes to play video in background on iOS\tenableADSExtension\tboolean\tfalse\tAdd required changes to use ads extension for video player\tenableCacheExtension\tboolean\tfalse\tAdd required changes to use cache extension for video player on iOS\tandroidExtensions\tobject\t{}\tYou can enable/disable extensions as per your requirement - this allow to reduce library size on android"}},"/other/misc":{"title":"Miscellaneous","data":{"ios-app-transport-security#iOS App Transport Security":"By default, iOS will only load encrypted (https) urls. If you want to load content from an unencrypted (http) source, you will need to modify your Info.plist file and add the following entry:\nFor more detailed info check this article","audio-mixing#Audio Mixing":"At some point in the future, react-native-video will include an Audio Manager for configuring how videos mix with other apps playing sounds on the device.On iOS, if you would like to allow other apps to play music over your video component, make the following change:AppDelegate.m\n#import // import\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions\n{\n ...\n [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil]; // allow\n ...\n}\nYou can also use the ignoreSilentSwitch prop.","android-expansion-file-usage#Android Expansion File Usage":"Expansions files allow you to ship assets that exceed the 100MB apk size limit and don't need to be updated each time you push an app update.This only supports mp4 files and they must not be compressed. Example command line for preventing compression:\nzip -r -n .mp4 *.mp4 player.video.example.com\n// Within your render function, assuming you have a file called\n// \"background.mp4\" in your expansion file. Just add your main and (if applicable) patch version\n ","load-files-with-the-rn-asset-system#Load files with the RN Asset System":"The asset system introduced in RN 0.14 allows loading image resources shared across iOS and Android without touching native code. As of RN 0.31 the same is true of mp4 video assets for Android. As of RN 0.33 iOS is also supported. Requires react-native-video@0.9.0.\n","play-in-background-on-ios#Play in background on iOS":"To enable audio to play in background on iOS the audio session needs to be set to AVAudioSessionCategoryPlayback. See [Apple documentation][3] for additional details. (NOTE: there is now a ticket to expose this as a prop )"}},"/other/new-arch":{"title":"New Architecture","data":{"fabric#Fabric":"Library currently does not support Fabric. We are working on it. In the meantime, you can use Interop Layer.","interop-layer#Interop Layer":"You can use this library on New Architecture by using Interop Layer. To use Interop Layer you need to have react-native >= 0.72.0 & react-native-video >= 6.0.0-beta.5.For react-native < 0.74 you need to add config in react-native.config.js file.\nmodule.exports = {\n project: {\n android: {\n unstable_reactLegacyComponentNames: ['Video'],\n },\n ios: {\n unstable_reactLegacyComponentNames: ['Video'],\n },\n },\n};","bridgeless-mode#Bridgeless Mode":"Library currently does not support Bridgeless Mode. We are working on it."}},"/other/plugin":{"title":"Plugin (experimental)","data":{"":"Since Version 6.4.0, it is possible to create plugins for analytics management and maybe much more.\nA sample plugin is available in the repository in: example/react-native-video-plugin-sample. (important FIXME, put sample link)","concept#Concept":"Most of the analytics system which tracks player information (bitrate, errors, ...) can be integrated directly with Exoplayer or AVPlayer handles.This plugin system allows none intrusive integration of analytics in the react-native-package. It shall be done in native language (kotlin/swift).The idea behind this system is to be able to plug an analytics package to react native video without doing any code change (ideally).Following documentation will show on how to create a new plugin for react native video","warning-and-consideration#Warning and consideration":"This is an experiental API, it is subject to change. The api with player is very simple but should be flexible enough to implement analytics system. If you need some metadata, you should implement setter in the new package you are creating.As api is flexible, it makes possible to missuse the system. It is necessary to consider the player handle as read-only. If you modify player behavior, we cannot garanty the good behavior of react-native-video package.","general#General":"First you need to create a new react native package:\nnpx create-react-native-library@latest react-native-video-custom-analytics\nBoth android and iOS implementation expose an interface RNVPlugin.\nYour react-native-video-custom-analytics shall implement this interface and register itself as a plugin for react native video.","android#Android":"There is no special requierement for gradle file.\nYou need two mandatory action to be able to receive player handle","1-create-the-plugin#1/ Create the plugin":"First you should instanciate a class which extends RNVPlugin.The proposed integration implement RNVPlugin directly inside the Module file (VideoPluginSampleModule).The RNVPlugin interface only defines 2 functions, see description here under.\n /**\n * Function called when a new player is created\n * @param id: a random string identifying the player\n * @param player: the instantiated player reference\n */\n fun onInstanceCreated(id: String, player: Any)\n /**\n * Function called when a player should be destroyed\n * when this callback is called, the plugin shall free all\n * resources and release all reference to Player object\n * @param id: a random string identifying the player\n * @param player: the player to release\n */\n fun onInstanceRemoved(id: String, player: Any)","2-register-the-plugin#2/ register the plugin":"To register this allocated class in the main react native video package you should call following function:\nReactNativeVideoManager.getInstance().registerPlugin(plugin)\nThe proposed integration register the instanciated class in createNativeModules entry point.Your native module can now track Player updates directly from Player reference and report to backend.","ios#ios":"","1-podspec-integration#1/ podspec integration":"Your new module shall be able to access to react-native-video package, then we must declare it as a dependency of the new module you are creating.\n s.dependency \"react-native-video\"","2-create-the-plugin#2/ Create the plugin":"First you should instanciate a class which extends RNVPlugin.The proposed integration implement RNVPlugin directly inside the entry point of the module file (VideoPluginSample).The RNVPlugin interface only defines 2 functions, see description here under.\n /**\n * Function called when a new player is created\n * @param player: the instantiated player reference\n */\n func onInstanceCreated(player: Any)\n /**\n * Function called when a player should be destroyed\n * when this callback is called, the plugin shall free all\n * resources and release all reference to Player object\n * @param player: the player to release\n */\n func onInstanceRemoved(player: Any)","3-register-the-plugin#3/ Register the plugin":"To register this allocated class in the main react native video package you should register it by calling this function:\nReactNativeVideoManager.shared.registerPlugin(plugin: plugin)\nThe proposed integration register the instanciated class in file VideoPluginSample in the init function:\nimport react_native_video\n...\noverride init() {\n super.init()\n ReactNativeVideoManager.shared.registerPlugin(plugin: self)\n}\nYour native module can now track Player updates directly from Player reference and report to backend."}},"/projects":{"title":"Useful projects","data":{"":"This page links other open source projects which can be useful for your player implementation. \nIf you have a project which can be useful for other users, feel free to open a PR to add it here.","our-thewidlarzgroup-libraries#Our (TheWidlarzGroup) libraries":"react-native-video-player: Our video player UI library","community-libraries#Community libraries":"react-native-corner-video: A floating video player\nreact-native-track-player: A toolbox for audio playback\nreact-native-video-controls: Video player UI\nreact-native-media-console: React-native-video-controls updated and rewritten in typescript"}},"/updating":{"title":"Updating","data":{"version-600#Version 6.0.0":"","ios#iOS":"","min-ios-version#Min iOS version":"From version 6.0.0, the minimum iOS version supported is 13.0. Projects that are using react-native < 0.73 will need to set the minimum iOS version to 13.0 in the Podfile.You can do it by adding the following code to your Podfile:\n- platform :ios, min_ios_version_supported\n+ MIN_IOS_OVERRIDE = '13.0'\n+ if Gem::Version.new(MIN_IOS_OVERRIDE) > Gem::Version.new(min_ios_version_supported)\n+ min_ios_version_supported = MIN_IOS_OVERRIDE\n+ end","linking#linking":"In your project Podfile add support for static dependency linking. This is required to support the new Promises subdependency in the iOS swift conversion.Add use_frameworks! :linkage => :static just under platform :ios in your ios project Podfile.See the example ios project for reference","podspec#podspec":"You can remove following lines from your podfile as they are not necessary anymore\n- `pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'`\n- `pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'`\nIf you were previously using VideoCaching, you should $RNVideoUseVideoCaching flag in your podspec, see: installation section","android#Android":"If you are already using Exoplayer on V5, you should remove the patch done from android/settings.gradle\n- include ':react-native-video'\n- project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')","using-app-build-settings#Using app build settings":"You will need to create a project.ext section in the top-level build.gradle file (not app/build.gradle). Fill in the values from the example below using the values found in your app/build.gradle file.\n// Top-level build file where you can add configuration options common to all sub-projects/modules.\nbuildscript {\n ... // Various other settings go here\n}\nallprojects {\n ... // Various other settings go here\n project.ext {\n compileSdkVersion = 31\n buildToolsVersion = \"30.0.2\"\n minSdkVersion = 21\n targetSdkVersion = 22\n }\n}\nIf you encounter an error Could not find com.android.support:support-annotations:27.0.0. reinstall your Android Support Repository."}},"/component/props":{"title":"Configurable props","data":{"":"This page shows the list of available properties to configure player","details#Details":"","adtagurl#adTagUrl":"[!WARNING]\nDeprecated, use source.ad.adTagUrl instead\nSets the VAST uri to play AVOD ads.Example:\nadTagUrl=\"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=\"\nNote: You need enable IMA SDK in gradle or pod file - enable client side ads insertion","allowsexternalplayback#allowsExternalPlayback":"Indicates whether the player allows switching to external playback mode such as AirPlay or HDMI.\ntrue (default) - allow switching to external playback mode\nfalse - Don't allow switching to external playback mode","audiooutput#audioOutput":"Changes the audio output.\nspeaker (default) - plays through speaker\nearpiece - plays through earpiece","automaticallywaitstominimizestalling#automaticallyWaitsToMinimizeStalling":"A Boolean value that indicates whether the player should automatically delay playback in order to minimize stalling. For clients linked against iOS 10.0 and later\nfalse - Immediately starts playback\ntrue (default) - Delays playback in order to minimize stalling","bufferconfig#bufferConfig":"[!WARNING]\nDeprecated, use source.bufferConfig instead\nAdjust the buffer settings. This prop takes an object with one or more of the properties listed below.\nProperty\tType\tDescription\tminBufferMs\tnumber\tThe default minimum duration of media that the player will attempt to ensure is buffered at all times, in milliseconds.\tmaxBufferMs\tnumber\tThe default maximum duration of media that the player will attempt to buffer, in milliseconds.\tbufferForPlaybackMs\tnumber\tThe default duration of media that must be buffered for playback to start or resume following a user action such as a seek, in milliseconds.\tbufferForPlaybackAfterRebufferMs\tnumber\tThe default duration of media that must be buffered for playback to resume after a rebuffer, in milliseconds. A rebuffer is defined to be caused by buffer depletion rather than a user action.\tbackBufferDurationMs\tnumber\tThe number of milliseconds of buffer to keep before the current position. This allows rewinding without rebuffering within that duration.\tmaxHeapAllocationPercent\tnumber\tThe percentage of available heap that the video can use to buffer, between 0 and 1\tminBackBufferMemoryReservePercent\tnumber\tThe percentage of available app memory at which during startup the back buffer will be disabled, between 0 and 1\tminBufferMemoryReservePercent\tnumber\tThe percentage of available app memory to keep in reserve that prevents buffer from using it, between 0 and 1\tcacheSizeMB\tnumber\tCache size in MB, enabling this to prevent new src requests and save bandwidth while repeating videos, or 0 to disable. Android only.\tlive\tobject\tObject containing another config set for live playback configuration, see next table\t\nDescription of live object:\nProperty\tType\tDescription\tmaxPlaybackSpeed\tnumber\tThe maximum playback speed the player can use to catch up when trying to reach the target live offset.\tminPlaybackSpeed\tnumber\tThe minimum playback speed the player can use to fall back when trying to reach the target live offset.\tmaxOffsetMs\tnumber\tThe maximum allowed live offset. Even when adjusting the offset to current network conditions, the player will not attempt to get above this offset during playback.\tminOffsetMs\tnumber\tThe minimum allowed live offset. Even when adjusting the offset to current network conditions, the player will not attempt to get below this offset during playback.\ttargetOffsetMs\tnumber\tThe target live offset. The player will attempt to get close to this live offset during playback if possible.\t\nFor android, more informations about live configuration can be find hereExample with default values:\nbufferConfig={{\n minBufferMs: 15000,\n maxBufferMs: 50000,\n bufferForPlaybackMs: 2500,\n bufferForPlaybackAfterRebufferMs: 5000,\n backBufferDurationMs: 120000,\n cacheSizeMB: 0,\n live: {\n targetOffsetMs: 500,\n },\n}}\nPlease note that the Android cache is a global cache that is shared among all components; individual components can still opt out of caching behavior by setting cacheSizeMB to 0, but multiple components with a positive cacheSizeMB will be sharing the same one, and the cache size will always be the first value set; it will not change during the app's lifecycle.","bufferingstrategy#bufferingStrategy":"Configure buffering / data loading strategy.\nDefault (default): use exoplayer default loading strategy\nDisableBuffering: never try to buffer more than needed. Be carefull using this value will stop playback. To be used with care.\nDependingOnMemory: use exoplayer default strategy, but stop buffering and starts gc if available memory is low |","chapters#chapters":"To provide a custom chapter source for tvOS. This prop takes an array of objects with the properties listed below.\nProperty\tType\tDescription\ttitle\tstring\tThe title of the chapter to create\tstartTime\tnumber\tThe start time of the chapter in seconds\tendTime\tnumber\tThe end time of the chapter in seconds\turi\tstring?\tOptional: Provide an http orl or the some base64 string to override the image of the chapter. For some media files the images are generated automatically","currentplaybacktime#currentPlaybackTime":"When playing an HLS live stream with a EXT-X-PROGRAM-DATE-TIME tag configured, then this property will contain the epoch value in msec.","controls#controls":"Determines whether to show player controls.\nfalse (default) - Don't show player controls\ntrue - Show player controls\nControls are always shown in fullscreen mode, even when controls={false}.\nIf needed, you can also add your controls or use a package like react-native-video-controls or react-native-media-console, see Useful Side Project.","controlsstyles#controlsStyles":"Adjust the control styles. This prop is need only if controls={true} and is an object. See the list of prop supported below.\nProperty\tType\tDescription\thidePosition\tboolean\tHides the position indicator. Default is false.\thidePlayPause\tboolean\tHides the play/pause button. Default is false.\thideForward\tboolean\tHides the forward button. Default is false.\thideRewind\tboolean\tHides the rewind button. Default is false.\thideNext\tboolean\tHides the next button. Default is false.\thidePrevious\tboolean\tHides the previous button. Default is false.\thideFullscreen\tboolean\tHides the fullscreen button. Default is false.\thideSeekBar\tboolean\tThe default value is false, allowing you to hide the seek bar for live broadcasts.\thideDuration\tboolean\tThe default value is false, allowing you to hide the duration.\thideNavigationBarOnFullScreenMode\tboolean\tThe default value is true, allowing you to hide the navigation bar on full-screen mode.\thideNotificationBarOnFullScreenMode\tboolean\tThe default value is true, allowing you to hide the notification bar on full-screen mode.\thideSettingButton\tboolean\tThe default value is true, allowing you to hide the setting button.\tseekIncrementMS\tnumber\tThe default value is 10000. You can change the value to increment forward and rewind.\tliveLabel\tstring\tAllowing you to set a label for live video.\t\nExample with default values:\ncontrolsStyles={{\n hidePosition: false,\n hidePlayPause: false,\n hideForward: false,\n hideRewind: false,\n hideNext: false,\n hidePrevious: false,\n hideFullscreen: false,\n hideSeekBar: false,\n hideDuration: false,\n hideNavigationBarOnFullScreenMode: true,\n hideNotificationBarOnFullScreenMode: true,\n hideSettingButton: true,\n seekIncrementMS: 10000,\n liveLabel: \"LIVE\"\n}}","contentstarttime#contentStartTime":"[!WARNING]\nDeprecated, use source.contentStartTime instead\nThe 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.\nNote: This feature only works on DASH streams","debug#debug":"Enable more verbosity in logs.\n[!WARNING]\nDo not use this open in production build\nProperty\tType\tDescription\tenable\tboolean\twhen true, display logs with verbosity higher\tthread\tboolean\tenable thread display\t\nExample with default values:\ndebug={{\n enable: true,\n thread: true,\n}}","disablefocus#disableFocus":"Determines whether video audio should override background music/audio in Android devices.\nfalse (default) - Override background audio/music\ntrue - Let background audio/music from other apps play\nNote: Allows multiple videos to play if set to true. If false, when one video is playing and another is started, the first video will be paused.","disabledisconnecterror#disableDisconnectError":"Determines if the player needs to throw an error when connection is lost or not\nfalse (default) - Player will throw an error when connection is lost\ntrue - Player will keep trying to buffer when network connect is lost","drm#drm":"[!WARNING]\ndeprecated, use source.drm instead\nTo setup DRM please follow this guide\n⚠️ DRM is not supported on visionOS yet","filter#filter":"Add video filter\nFilterType.NONE (default) - No Filter\nFilterType.INVERT - CIColorInvert\nFilterType.MONOCHROME - CIColorMonochrome\nFilterType.POSTERIZE - CIColorPosterize\nFilterType.FALSE - CIFalseColor\nFilterType.MAXIMUMCOMPONENT - CIMaximumComponent\nFilterType.MINIMUMCOMPONENT - CIMinimumComponent\nFilterType.CHROME - CIPhotoEffectChrome\nFilterType.FADE - CIPhotoEffectFade\nFilterType.INSTANT - CIPhotoEffectInstant\nFilterType.MONO - CIPhotoEffectMono\nFilterType.NOIR - CIPhotoEffectNoir\nFilterType.PROCESS - CIPhotoEffectProcess\nFilterType.TONAL - CIPhotoEffectTonal\nFilterType.TRANSFER - CIPhotoEffectTransfer\nFilterType.SEPIA - CISepiaTone\nFor more details on these filters refer to the iOS docs.Notes:\nUsing a filter can impact CPU usage. A workaround is to save the video with the filter and then load the saved video.\nVideo filter is currently not supported on HLS playlists.\nfilterEnabled must be set to true","filterenabled#filterEnabled":"Enable video filter.\nfalse (default) - Don't enable filter\ntrue - Enable filter","focusable#focusable":"Whether this video view should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.\nfalse - Makes view unfocusable\ntrue (default) - Makes view focusable","fullscreen#fullscreen":"Controls whether the player enters fullscreen on play.\nSee presentFullscreenPlayer for details.\nfalse (default) - Don't display the video in fullscreen\ntrue - Display the video in fullscreen","fullscreenautorotate#fullscreenAutorotate":"If a preferred fullscreenOrientation is set, causes the video to rotate to that orientation but permits rotation of the screen to orientation held by user. Defaults to TRUE.","fullscreenorientation#fullscreenOrientation":"all (default) -\nlandscape\nportrait","headers#headers":"Pass headers to the HTTP client. Can be used for authorization. Headers must be a\npart of the source object.Example:\nsource={{\n uri: \"https://www.example.com/video.mp4\",\n headers: {\n Authorization: 'bearer some-token-value',\n 'X-Custom-Header': 'some value'\n }\n}}","hideshutterview#hideShutterView":"Controls whether the ExoPlayer shutter view (black screen while loading) is enabled.\nfalse (default) - Show shutter view\ntrue - Hide shutter view","ignoresilentswitch#ignoreSilentSwitch":"Controls the iOS silent switch behavior\n\"inherit\" (default) - Use the default AVPlayer behavior\n\"ignore\" - Play audio even if the silent switch is set\n\"obey\" - Don't play audio if the silent switch is set","maxbitrate#maxBitRate":"Sets the desired limit, in bits per second, of network bandwidth consumption when multiple video streams are available for a playlist.Default: 0. Don't limit the maxBitRate.Note: This property can interact with selectedVideoTrack.\nTo use maxBitrate, selectedVideoTrack shall be undefined or {type: SelectedVideoTrackType.AUTO}.Example:\nmaxBitRate={2000000} // 2 megabits","minloadretrycount#minLoadRetryCount":"[!WARNING]\ndeprecated, use source.minLoadRetryCount key instead\nSets the minimum number of times to retry loading data before failing and reporting an error to the application. Useful to recover from transient internet failures.Default: 3. Retry 3 times.Example:\nminLoadRetryCount={5} // retry 5 times","mixwithothers#mixWithOthers":"Controls how Audio mix with other apps.\n\"inherit\" (default) - Use the default AVPlayer behavior\n\"mix\" - Audio from this video mixes with audio from other apps.\n\"duck\" - Reduces the volume of other apps while audio from this video plays.","muted#muted":"Controls whether the audio is muted\nfalse (default) - Don't mute audio\ntrue - Mute audio","paused#paused":"Controls whether the media is paused\nfalse (default) - Don't pause the media\ntrue - Pause the media","pictureinpicture#pictureInPicture":"Determine whether the media should played as picture in picture.\nfalse (default) - Don't not play as picture in picture\ntrue - Play the media as picture in picture\nNOTE: Video ads cannot start when you are using the PIP on iOS (more info available at Google IMA SDK Docs). If you are using custom controls, you must hide your PIP button when you receive the STARTED event from onReceiveAdEvent and show it again when you receive the ALL_ADS_COMPLETED event.","playinbackground#playInBackground":"Determine whether the media should continue playing while the app is in the background. This allows customers to continue listening to the audio.\nfalse (default) - Don't continue playing the media\ntrue - Continue playing the media\nTo use this feature on iOS, you must:\nEnable Background Audio in your Xcode project\nSet the ignoreSilentSwitch prop to \"ignore\"","playwheninactive#playWhenInactive":"Determine whether the media should continue playing when notifications or the Control Center are in front of the video.\nfalse (default) - Don't continue playing the media\ntrue - Continue playing the media","poster#poster":"[!WARNING]\nValue: string with a URL for the poster is deprecated, use poster as object instead\nAn image to display while the video is loadingValue: Props for the Image component. The poster is visible when the source attribute is provided.\n\n poster={{\n source: { uri: \"https://baconmockup.com/300/200/\" },\n resizeMode: \"cover\",\n // ...\n }}\n ","posterresizemode#posterResizeMode":"[!WARNING]\ndeprecated, use poster with resizeMode key instead\nDetermines how to resize the poster image when the frame doesn't match the raw video dimensions.\n\"contain\" (default) - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).\n\"center\" - Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.\n\"cover\" - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).\n\"none\" - Don't apply resize\n\"repeat\" - Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only)\n\"stretch\" - Scale width and height independently, This may change the aspect ratio of the src.","preferredforwardbufferduration#preferredForwardBufferDuration":"The duration the player should buffer media from the network ahead of the playhead to guard against playback disruption. Sets the preferredForwardBufferDuration instance property on AVPlayerItem.Default: 0","preventsdisplaysleepduringvideoplayback#preventsDisplaySleepDuringVideoPlayback":"Controls whether or not the display should be allowed to sleep while playing the video. Default is not to allow display to sleep.Default: true","progressupdateinterval#progressUpdateInterval":"Delay in milliseconds between onProgress events in milliseconds.Default: 250.0","rate#rate":"Speed at which the media should play.\n0.0 - Pauses the video (iOS only)\n1.0 - Play at normal speed (default)\nOther values - Slow down or speed up playback","renderloader#renderLoader":"Allows you to create custom components to display while the video is loading.\nIf renderLoader is provided, poster and posterResizeMode will be ignored.\nrenderLoader is either a component or a function returning a component.\nIt is recommended to use the function for optimization matter.renderLoader function be called with parameters of type ReactVideoRenderLoaderProps to be able to adapt loader\ninterface ReactVideoRenderLoaderProps {\n source?: ReactVideoSource; /// source of the video\n style?: StyleProp; /// style to apply\n resizeMode?: EnumValues; /// resizeMode provided to the video component\n}\nSample:\n\n renderLoader={() => (\n \n Custom Loader \n )\n }\n ","repeat#repeat":"Determine whether to repeat the video when the end is reached\nfalse (default) - Don't repeat the video\ntrue - Repeat the video","reportbandwidth#reportBandwidth":"Determine whether to generate onBandwidthUpdate events. This is needed due to the high frequency of these events on ExoPlayer.\nfalse (default) - Don't generate onBandwidthUpdate events\ntrue - Generate onBandwidthUpdate events","resizemode#resizeMode":"Determines how to resize the video when the frame doesn't match the raw video dimensions.\n\"none\" (default) - Don't apply resize\n\"contain\" - Scale the video uniformly (maintain the video's aspect ratio) so that both dimensions (width and height) of the video will be equal to or less than the corresponding dimension of the view (minus padding).\n\"cover\" - Scale the video uniformly (maintain the video's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).\n\"stretch\" - Scale width and height independently, This may change the aspect ratio of the src.","selectedaudiotrack#selectedAudioTrack":"Configure which audio track, if any, is played.\nselectedAudioTrack={{\n type: Type,\n value: Value\n}}\nExample:\nselectedAudioTrack={{\n type: \"title\",\n value: \"Dubbing\"\n}}\nType\tValue\tDescription\t\"system\" (default)\tN/A\tPlay the audio track that matches the system language. If none match, play the first track.\t\"disabled\"\tN/A\tTurn off audio\t\"title\"\tstring\tPlay the audio track with the title specified as the Value, e.g. \"French\"\t\"language\"\tstring\tPlay the audio track with the language specified as the Value, e.g. \"fr\"\t\"index\"\tnumber\tPlay the audio track with the index specified as the value, e.g. 0\t\nIf a track matching the specified Type (and Value if appropriate) is unavailable, the first audio track will be played. If multiple tracks match the criteria, the first match will be used.","selectedtexttrack#selectedTextTrack":"Configure which text track (caption or subtitle), if any, is shown.\nselectedTextTrack={{\n type: Type,\n value: Value\n}}\nExample:\nselectedTextTrack={{\n type: \"title\",\n value: \"English Subtitles\"\n}}\nType\tValue\tDescription\t\"system\" (default)\tN/A\tDisplay captions only if the system preference for captions is enabled\t\"disabled\"\tN/A\tDon't display a text track\t\"title\"\tstring\tDisplay the text track with the title specified as the Value, e.g. \"French 1\"\t\"language\"\tstring\tDisplay the text track with the language specified as the Value, e.g. \"fr\"\t\"index\"\tnumber\tDisplay the text track with the index specified as the value, e.g. 0\t\nBoth iOS & Android (only 4.4 and higher) offer Settings to enable Captions for hearing impaired people. If \"system\" is selected and the Captions Setting is enabled, iOS/Android will look for a caption that matches that customer's language and display it.If a track matching the specified Type (and Value if appropriate) is unavailable, no text track will be displayed. If multiple tracks match the criteria, the first match will be used.","selectedvideotrack#selectedVideoTrack":"Configure which video track should be played. By default, the player uses Adaptive Bitrate Streaming to automatically select the stream it thinks will perform best based on available bandwidth.\nselectedVideoTrack={{\n type: Type,\n value: Value\n}}\nExample:\nselectedVideoTrack={{\n type: \"resolution\",\n value: 480\n}}\nType\tValue\tDescription\t\"auto\" (default)\tN/A\tLet the player determine which track to play using ABR\t\"disabled\"\tN/A\tTurn off video\t\"resolution\"\tnumber\tPlay the video track with the height specified, e.g. 480 for the 480p stream\t\"index\"\tnumber\tPlay the video track with the index specified as the value, e.g. 0\t\nIf a track matching the specified Type (and Value if appropriate) is unavailable, ABR will be used.","shuttercolor#shutterColor":"Apply color to shutter view, if you see black flashes before video start then set\nshutterColor = 'transparent';\nblack (default)","source#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. Please be sure that all props are provided before/at the same time as setting the source.Rendering the player component with a null source will init the player, and start playing once a source value is provided.Providing a null source value after loading a previous source will stop playback, and clear out the previous source content.The docs for this prop are incomplete and will be updated as each option is investigated and tested.","asset-loaded-via-require#Asset loaded via require":"⚠️ on iOS, you file name must not contain spaces eg. my video.mp4 will not work, use my-video.mp4 instead\nExample:Pass directly the asset to play (deprecated)\nconst sintel = require('./sintel.mp4');\nsource = {sintel};\nOr by using an uri (starting from 6.0.0-beta.6)\nconst sintel = require('./sintel.mp4');\nsource={{ uri: sintel }}","uri-string#URI string":"A number of URI schemes are supported by passing an object with a uri attribute.All uri string shall be url encoded.\nFor exemple 'www.myurl.com/blabla?q=test uri' is invalid, where 'www.myurl.com/blabla?q=test%20uri' is valid","web-address-http-https#Web address (http://, https://)":"Example:\nsource={{uri: 'https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4' }}","file-path-file#File path (file://)":"Example:\nsource={{ uri: 'file:///sdcard/Movies/sintel.mp4' }}\nNote: Your app will need to request permission to read external storage if you're accessing a file outside your app.","file-from-asset-folder-asset#File from asset folder (asset://)":"Allows to play a video file from the asset folder from the applicationExample:\nsource={{ uri: 'asset:///sintel.mp4' }}","ipod-library-ipod-library#iPod Library (ipod-library://)":"Path to a sound file in your iTunes library. Typically shared from iTunes to your app.Example:\nsource={{ uri: 'ipod-library:///path/to/music.mp3' }}\nNote: Using this feature adding an entry for NSAppleMusicUsageDescription to your Info.plist file as described here","explicit-mimetype-for-the-stream#Explicit mimetype for the stream":"Provide a member type with value (mpd/m3u8/ism) inside the source object.\nSometimes is needed when URL extension does not match with the mimetype that you are expecting, as seen on the next example. (Extension is .ism -smooth streaming- but file served is on format mpd -mpeg dash-)Example:\nsource={{ uri: 'http://host-serving-a-type-different-than-the-extension.ism/manifest(format=mpd-time-csf)',\ntype: 'mpd' }}","other-protocols#Other protocols":"The following other types are supported on some platforms, but aren't fully documented yet:\ncontent://, ms-appx://, ms-appdata://, assets-library://","using-drm-content#Using DRM content":"To setup DRM please follow this guideExample:\n {\n description: 'WV: Secure SD & HD (cbcs,MP4,H264)',\n uri: 'https://storage.googleapis.com/wvmedia/cbcs/h264/tears/tears_aes_cbcs.mpd',\n drm: {\n type: DRMType.WIDEVINE,\n licenseServer:\n 'https://proxy.uat.widevine.com/proxy?provider=widevine_test',\n },\n },","start-playback-at-a-specific-point-in-time#Start playback at a specific point in time":"Provide an optional startPosition for video. Value is in milliseconds. If the cropStart prop is applied, it will be applied from that point forward.\n(If it is negative or undefined or null, it is ignored)","playing-only-a-portion-of-the-video-start--end-time#Playing only a portion of the video (start & end time)":"Provide an optional cropStart and/or cropEnd for the video. Value is in milliseconds. Useful when you want to play only a portion of a large video.Example\nsource={{ uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', cropStart: 36012, cropEnd: 48500 }}\nsource={{ uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', cropStart: 36012 }}\nsource={{ uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', cropEnd: 48500 }}","overriding-the-metadata-of-a-source#Overriding the metadata of a source":"Provide an optional title, subtitle, artist, imageUri and/or description properties for the video.\nUseful when using notification controls on Android or iOS or to adapt the tvOS playback experience.Example:\nsource={{\n uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',\n metadata: {\n title: 'Custom Title',\n subtitle: 'Custom Subtitle',\n artist: 'Custom Artist',\n description: 'Custom Description',\n imageUri: 'https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png'\n }\n }}","ad#ad":"Sets the ad configuration.Example:\nad: {\n 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=\"\n adLanguage=\"fr\"\n}\nSee: [./ads.md] for more informationsNote: You need enable IMA SDK in gradle or pod file - enable client side ads insertion","contentstarttime-1#contentStartTime":"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.\nNote: This feature only works on DASH streams","texttracksallowchunklesspreparation#textTracksAllowChunklessPreparation":"AllowChunklessPreparation for hls media source.\nsee: disabling-chunkless in android documentation.Default value: true.\nsource={{\n uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',\n textTracksAllowChunklessPreparation: false,\n }}","bufferconfig-1#bufferConfig":"Adjust the buffer settings. This prop takes an object with one or more of the properties listed below.\nProperty\tType\tDescription\tminBufferMs\tnumber\tThe default minimum duration of media that the player will attempt to ensure is buffered at all times, in milliseconds.\tmaxBufferMs\tnumber\tThe default maximum duration of media that the player will attempt to buffer, in milliseconds.\tbufferForPlaybackMs\tnumber\tThe default duration of media that must be buffered for playback to start or resume following a user action such as a seek, in milliseconds.\tbufferForPlaybackAfterRebufferMs\tnumber\tThe default duration of media that must be buffered for playback to resume after a rebuffer, in milliseconds. A rebuffer is defined to be caused by buffer depletion rather than a user action.\tbackBufferDurationMs\tnumber\tThe number of milliseconds of buffer to keep before the current position. This allows rewinding without rebuffering within that duration.\tmaxHeapAllocationPercent\tnumber\tThe percentage of available heap that the video can use to buffer, between 0 and 1\tminBackBufferMemoryReservePercent\tnumber\tThe percentage of available app memory at which during startup the back buffer will be disabled, between 0 and 1\tminBufferMemoryReservePercent\tnumber\tThe percentage of available app memory to keep in reserve that prevents buffer from using it, between 0 and 1\tcacheSizeMB\tnumber\tCache size in MB, enabling this to prevent new src requests and save bandwidth while repeating videos, or 0 to disable. Android only.\tlive\tobject\tObject containing another config set for live playback configuration, see next table\t\nDescription of live object:\nProperty\tType\tDescription\tmaxPlaybackSpeed\tnumber\tThe maximum playback speed the player can use to catch up when trying to reach the target live offset.\tminPlaybackSpeed\tnumber\tThe minimum playback speed the player can use to fall back when trying to reach the target live offset.\tmaxOffsetMs\tnumber\tThe maximum allowed live offset. Even when adjusting the offset to current network conditions, the player will not attempt to get above this offset during playback.\tminOffsetMs\tnumber\tThe minimum allowed live offset. Even when adjusting the offset to current network conditions, the player will not attempt to get below this offset during playback.\ttargetOffsetMs\tnumber\tThe target live offset. The player will attempt to get close to this live offset during playback if possible.\t\nFor android, more informations about live configuration can be find hereExample with default values:\nbufferConfig={{\n minBufferMs: 15000,\n maxBufferMs: 50000,\n bufferForPlaybackMs: 2500,\n bufferForPlaybackAfterRebufferMs: 5000,\n backBufferDurationMs: 120000,\n cacheSizeMB: 0,\n live: {\n targetOffsetMs: 500,\n },\n}}\nPlease note that the Android cache is a global cache that is shared among all components; individual components can still opt out of caching behavior by setting cacheSizeMB to 0, but multiple components with a positive cacheSizeMB will be sharing the same one, and the cache size will always be the first value set; it will not change during the app's lifecycle.","minloadretrycount-1#minLoadRetryCount":"Sets the minimum number of times to retry loading data before failing and reporting an error to the application. Useful to recover from transient internet failures.Default: 3. Retry 3 times.Example:\nsource={{\n uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',\n minLoadRetryCount={5} // retry 5 times\n}}","texttracks#textTracks":"Load one or more \"sidecar\" text tracks. This takes an array of objects representing each track. Each object should have the format:\n⚠️ This feature does not work with HLS playlists (e.g m3u8) on iOS\nProperty\tDescription\ttitle\tDescriptive name for the track\tlanguage\t2 letter ISO 639-1 code representing the language\ttype\tMime type of the track _ TextTrackType.SUBRIP - SubRip (.srt) _ TextTrackType.TTML - TTML (.ttml) * TextTrackType.VTT - WebVTT (.vtt)iOS only supports VTT, Android supports all 3\turi\tURL for the text track. Currently, only tracks hosted on a webserver are supported\t\nOn 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:\nimport { TextTrackType }, Video from 'react-native-video';\ntextTracks={[\n {\n title: \"English CC\",\n language: \"en\",\n type: TextTrackType.VTT, // \"text/vtt\"\n uri: \"https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt\"\n },\n {\n title: \"Spanish Subtitles\",\n language: \"es\",\n type: TextTrackType.SUBRIP, // \"application/x-subrip\"\n uri: \"https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt\"\n }\n]}","subtitlestyle#subtitleStyle":"Property\tPlatform\tDescription\tPlatforms\tfontSize\tAndroid\tAdjust the font size of the subtitles. Default: font size of the device\tAndroid\tpaddingTop\tAndroid\tAdjust the top padding of the subtitles. Default: 0\tAndroid\tpaddingBottom\tAndroid\tAdjust the bottom padding of the subtitles. Default: 0\tAndroid\tpaddingLeft\tAndroid\tAdjust the left padding of the subtitles. Default: 0\tAndroid\tpaddingRight\tAndroid\tAdjust the right padding of the subtitles. Default: 0\tAndroid\topacity\tAndroid, iOS\tAdjust 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.\tAndroid, iOS\tsubtitlesFollowVideo\tAndroid\tBoolean to adjust position of subtitles. Default: true\t\nExample:\nsubtitleStyle={{ paddingBottom: 50, fontSize: 20, opacity: 0 }}\nNote for subtitlesFollowVideosubtitlesFollowVideo helps to determine how the subtitles are positionned.\nTo understand this prop you need to understand how views management works.\nThe main View style passed to react native video is the position reserved to display the video component.\nIt may not match exactly the real video size.\nFor exemple, you can pass a 4:3 video view and render a 16:9 video inside.\nSo 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.\nWhen putting subtitlesFollowVideo to true, the subtitle view will be adapt to the video view.\nIt means that if the video is displayed out of screen, the subtitles may also be displayed out of screen.\nWhen putting subtitlesFollowVideo to false, the subtitle view will keep adapting to the main view.\nIt means that if the video is displayed out of screen, the subtitles may also be displayed out of screen.\nThis prop can be changed on runtime.","texttracks-1#textTracks":"[!WARNING]\ndeprecated, use source.textTracks instead. changing text tracks will restart playback\nLoad one or more \"sidecar\" text tracks. This takes an array of objects representing each track. Each object should have the format:\n⚠️ This feature does not work with HLS playlists (e.g m3u8) on iOS\nProperty\tDescription\ttitle\tDescriptive name for the track\tlanguage\t2 letter ISO 639-1 code representing the language\ttype\tMime type of the track _ TextTrackType.SUBRIP - SubRip (.srt) _ TextTrackType.TTML - TTML (.ttml) * TextTrackType.VTT - WebVTT (.vtt)iOS only supports VTT, Android supports all 3\turi\tURL for the text track. Currently, only tracks hosted on a webserver are supported\t\nOn 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:\nimport { TextTrackType }, Video from 'react-native-video';\ntextTracks={[\n {\n title: \"English CC\",\n language: \"en\",\n type: TextTrackType.VTT, // \"text/vtt\"\n uri: \"https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt\"\n },\n {\n title: \"Spanish Subtitles\",\n language: \"es\",\n type: TextTrackType.SUBRIP, // \"application/x-subrip\"\n uri: \"https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt\"\n }\n]}","shownotificationcontrols#showNotificationControls":"Controls whether to show media controls in the notification area.\nFor Android each Video component will have its own notification controls and for 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 propably want also 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 metadata property in the source prop.\nfalse (default) - Don't show media controls in the notification area\ntrue - Show media controls in the notification area\nTo 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:\n\n ...\n \n \n ...\n \n ...\n \n \n \n \n \n \n ","usesecureview#useSecureView":"[!WARNING]\ndeprecated, use viewType instead\nForce the output to a SurfaceView and enables the secure surface.This will override useTextureView flag.SurfaceView is is the only one that can be labeled as secure.\ntrue - Use security\nfalse (default) - Do not use security","usetextureview#useTextureView":"[!WARNING]\ndeprecated, use viewType instead\nControls whether to output to a TextureView or SurfaceView.SurfaceView is more efficient and provides better performance but has two limitations:\nIt can't be animated, transformed or scaled\nYou can't overlay multiple SurfaceViews\nuseTextureView can only be set at same time you're setting the source.\ntrue (default) - Use a TextureView\nfalse - Use a SurfaceView","viewtype#viewType":"Allow to explicitly specify view type.\nThis flag replace useSecureView and useTextureView fields.\nThere are 3 available values:\n'textureView': The video is rendered in a texture view. it allows mapping the view on a texture (useful for 3D).\nDRM playback is not supported on textureView, if drm prop is provided, the suface will be transformed to a SurfaceView.\n'surfaceView' (default): The video is rendered in a surface. take less resources to be rendered.\n'secureView': The video is rendered in a surface which disallow taking screenshot of the video","volume#volume":"Adjust the volume.\n1.0 (default) - Play at full volume\n0.0 - Mute the audio\nOther values - Reduce volume","cmcd#cmcd":"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.\nfalse (default) - Don't use CMCD\ntrue - Use default CMCD configuration\nobject - Use custom CMCD configuration\nWhen providing an object, you can configure the following properties:\nProperty\tType\tDescription\tmode\tCmcdMode\tThe mode for sending CMCD data\trequest\tCmcdData\tCustom key-value pairs for the request object\tsession\tCmcdData\tCustom key-value pairs for the session object\tobject\tCmcdData\tCustom key-value pairs for the object metadata\tstatus\tCmcdData\tCustom key-value pairs for the status information\t\nNote: The mode property defaults to CmcdMode.MODE_QUERY_PARAMETER if not specified.","cmcdmode#CmcdMode":"CmcdMode is an enum that defines how CMCD data should be sent:\nCmcdMode.MODE_REQUEST_HEADER (0) - Send CMCD data in the HTTP request headers.\nCmcdMode.MODE_QUERY_PARAMETER (1) - Send CMCD data as query parameters in the URL.","cmcddata#CmcdData":"CmcdData is a type representing custom key-value pairs for CMCD data. It's defined as:\ntype CmcdData = Record<`${string}-${string}`, string | number>;\nCustom key names MUST include a hyphenated prefix to prevent namespace collisions. It's recommended to use a reverse-DNS syntax for custom prefixes.Example:\n "}}}
\ No newline at end of file
diff --git a/_next/static/chunks/pages/projects-cae75f51f417125a.js b/_next/static/chunks/pages/projects-cae75f51f417125a.js
deleted file mode 100644
index 33826c9152..0000000000
--- a/_next/static/chunks/pages/projects-cae75f51f417125a.js
+++ /dev/null
@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[327],{5628:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/projects",function(){return r(8271)}])},8271:function(e,t,r){"use strict";r.r(t),r.d(t,{__toc:function(){return s}});var n=r(5893),i=r(2673),o=r(2643);let s=[{depth:2,value:"UI over react-native-video",id:"ui-over-react-native-video"},{depth:2,value:"Other tools",id:"other-tools"}];function c(e){let t=Object.assign({h1:"h1",p:"p",br:"br",h2:"h2",ul:"ul",li:"li",a:"a"},(0,o.a)(),e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:"Useful projects"}),"\n",(0,n.jsxs)(t.p,{children:["This page links other open source projects which can be useful for your player implementation. ",(0,n.jsx)(t.br,{}),"\nIf you have a project which can be useful for other users, feel free to open a PR to add it here."]}),"\n",(0,n.jsx)(t.h2,{id:"ui-over-react-native-video",children:"UI over react-native-video"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://github.com/itsnubix/react-native-video-controls",children:"react-native-video-controls"}),": First reference player UI"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://github.com/criszz77/react-native-media-console",children:"react-native-media-console"}),": React-native-video-controls updated and rewritten in typescript"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://github.com/Lg0gs/react-native-corner-video",children:"react-native-corner-video"}),": A floating video player"]}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"other-tools",children:"Other tools"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://github.com/doublesymmetry/react-native-track-player",children:"react-native-track-player"}),": A toolbox to control player over media session"]}),"\n"]})]})}t.default=(0,i.j)({MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,o.a)(),e.components);return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)},pageOpts:{filePath:"pages/projects.md",route:"/projects",timestamp:1733856415e3,title:"Useful projects",headings:s},pageNextRoute:"/projects"})}},function(e){e.O(0,[673,888,774,179],function(){return e(e.s=5628)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/_next/static/chunks/pages/projects-cea3e850f221f643.js b/_next/static/chunks/pages/projects-cea3e850f221f643.js
new file mode 100644
index 0000000000..be8e383855
--- /dev/null
+++ b/_next/static/chunks/pages/projects-cea3e850f221f643.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[327],{5628:function(e,r,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/projects",function(){return i(8271)}])},8271:function(e,r,i){"use strict";i.r(r),i.d(r,{__toc:function(){return s}});var t=i(5893),n=i(2673),a=i(2643);let s=[{depth:2,value:"Our (TheWidlarzGroup) libraries",id:"our-thewidlarzgroup-libraries"},{depth:2,value:"Community libraries",id:"community-libraries"}];function o(e){let r=Object.assign({h1:"h1",p:"p",br:"br",h2:"h2",ul:"ul",li:"li",a:"a"},(0,a.a)(),e.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.h1,{children:"Useful projects"}),"\n",(0,t.jsxs)(r.p,{children:["This page links other open source projects which can be useful for your player implementation. ",(0,t.jsx)(r.br,{}),"\nIf you have a project which can be useful for other users, feel free to open a PR to add it here."]}),"\n",(0,t.jsx)(r.h2,{id:"our-thewidlarzgroup-libraries",children:"Our (TheWidlarzGroup) libraries"}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.a,{href:"https://github.com/TheWidlarzGroup/react-native-video-player",children:"react-native-video-player"}),": Our video player UI library"]}),"\n"]}),"\n",(0,t.jsx)(r.h2,{id:"community-libraries",children:"Community libraries"}),"\n",(0,t.jsxs)(r.ul,{children:["\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.a,{href:"https://github.com/Lg0gs/react-native-corner-video",children:"react-native-corner-video"}),": A floating video player"]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.a,{href:"https://github.com/doublesymmetry/react-native-track-player",children:"react-native-track-player"}),": A toolbox for audio playback"]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.a,{href:"https://github.com/itsnubix/react-native-video-controls",children:"react-native-video-controls"}),": Video player UI"]}),"\n",(0,t.jsxs)(r.li,{children:[(0,t.jsx)(r.a,{href:"https://github.com/criszz77/react-native-media-console",children:"react-native-media-console"}),": React-native-video-controls updated and rewritten in typescript"]}),"\n"]})]})}r.default=(0,n.j)({MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:r}=Object.assign({},(0,a.a)(),e.components);return r?(0,t.jsx)(r,{...e,children:(0,t.jsx)(o,{...e})}):o(e)},pageOpts:{filePath:"pages/projects.md",route:"/projects",timestamp:1734189318e3,title:"Useful projects",headings:s},pageNextRoute:"/projects"})}},function(e){e.O(0,[673,888,774,179],function(){return e(e.s=5628)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/component/ads.html b/component/ads.html
index c1e1c510c0..12595a1cc7 100644
--- a/component/ads.html
+++ b/component/ads.html
@@ -11,7 +11,7 @@
--nextra-primary-hue: 204deg;
--nextra-primary-saturation: 100%;
}
-