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

Add react-native-web support (#3958)

Browse Source 
Co-authored-by: Kamil Moskała <91079590+moskalakamil@users.noreply.github.com>
This commit is contained in:
Zoe Roux
2024-11-13 21:19:57 +01:00
committed by GitHub
parent d45300270e
commit 5fa77c4562
24 changed files with 608 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/pages/component/events.mdx
View File

@@ -103,7 +103,7 @@ Note: On Android, you must set the [reportBandwidth](#reportbandwidth) prop to e
### `onBuffer`
<PlatformsList types={['Android', 'iOS']} />
<PlatformsList types={['Android', 'iOS', 'web']} />
Callback function that is called when the player buffers.
@@ -219,6 +219,9 @@ Payload: none
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:
| Property | Type | Description |
@@ -292,7 +295,7 @@ Example:
### `onPlaybackStateChanged`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
<PlatformsList types={['Android', 'iOS', 'visionOS', 'web']} />
Callback function that is called when the playback state changes.
@@ -463,7 +466,7 @@ Payload: none
### `onSeek`
<PlatformsList types={['Android', 'iOS', 'Windows UWP']} />
<PlatformsList types={['Android', 'iOS', 'Windows UWP', 'web']} />
Callback function that is called when a seek completes.
@@ -604,7 +607,7 @@ Example:
### `onVolumeChange`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
<PlatformsList types={['Android', 'iOS', 'visionOS', 'web']} />
Callback function that is called when the volume of player changes.

23
docs/pages/component/methods.mdx
View File

@@ -6,7 +6,7 @@ This page shows the list of available methods
### `dismissFullscreenPlayer`
<PlatformsList types={['Android', 'iOS']} />
<PlatformsList types={['Android', 'iOS', 'web']} />
`dismissFullscreenPlayer(): Promise<void>`
@@ -17,7 +17,7 @@ Take the player out of fullscreen mode.
### `pause`
<PlatformsList types={['Android', 'iOS']} />
<PlatformsList types={['Android', 'iOS', 'web']} />
`pause(): Promise<void>`
@@ -25,7 +25,7 @@ Pause the video.
### `presentFullscreenPlayer`
<PlatformsList types={['Android', 'iOS']} />
<PlatformsList types={['Android', 'iOS', 'web']} />
`presentFullscreenPlayer(): Promise<void>`
@@ -40,7 +40,7 @@ On Android, this puts the navigation controls in fullscreen mode. It is not a co
### `resume`
<PlatformsList types={['Android', 'iOS']} />
<PlatformsList types={['Android', 'iOS', 'web']} />
`resume(): Promise<void>`
@@ -100,7 +100,7 @@ tolerance is the max distance in milliseconds from the seconds position that's a
### `setVolume`
<PlatformsList types={['Android', 'iOS']} />
<PlatformsList types={['Android', 'iOS', 'web']} />
`setVolume(value): Promise<void>`
@@ -108,7 +108,7 @@ This function will change the volume exactly like [volume](./props#volume) prope
### `getCurrentPosition`
<PlatformsList types={['Android', 'iOS']} />
<PlatformsList types={['Android', 'iOS', 'web']} />
`getCurrentPosition(): Promise<number>`
@@ -127,7 +127,7 @@ Changing source with this function will overide source provided as props.
### `setFullScreen`
<PlatformsList types={['Android', 'iOS']} />
<PlatformsList types={['Android', 'iOS', 'web']} />
`setFullScreen(fullscreen): Promise<void>`
@@ -137,6 +137,13 @@ 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`
<PlatformsList types={['web']} />
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
```tsx
@@ -188,7 +195,7 @@ Possible values are:
### `isCodecSupported`
<PlatformsList types={['Android']} />
<PlatformsList types={['Android', 'web']} />
Indicates whether the provided codec is supported level supported by device.

12
docs/pages/component/props.mdx
View File

@@ -131,7 +131,7 @@ When playing an HLS live stream with a `EXT-X-PROGRAM-DATE-TIME` tag configured,
### `controls`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
<PlatformsList types={['Android', 'iOS', 'visionOS', 'web']} />
Determines whether to show player controls.
@@ -300,7 +300,7 @@ Whether this video view should be focusable with a non-touch input device, eg. r
### `fullscreen`
<PlatformsList types={['Android', 'iOS', 'visionOS']} />
<PlatformsList types={['Android', 'iOS', 'visionOS', 'web']} />
Controls whether the player enters fullscreen on play.
See [presentFullscreenPlayer](#presentfullscreenplayer) for details.
@@ -316,7 +316,7 @@ If a preferred [fullscreenOrientation](#fullscreenorientation) is set, causes th
### `fullscreenOrientation`
<PlatformsList types={['iOS', 'visionOS']} />
<PlatformsList types={['iOS', 'visionOS', 'web']} />
- **all (default)** -
- **landscape**
@@ -709,6 +709,8 @@ The docs for this prop are incomplete and will be updated as each option is inve
> ⚠️ on iOS, you file name must not contain spaces eg. `my video.mp4` will not work, use `my-video.mp4` instead
<PlatformsList types={['Android', 'iOS', 'visionOS', 'Windows UWP']} />
Example:
Pass directly the asset to play (deprecated)
@@ -820,7 +822,7 @@ Example:
#### Start playback at a specific point in time
<PlatformsList types={['Android', 'iOS']} />
<PlatformsList types={['Android', 'iOS', 'web']} />
Provide an optional `startPosition` for video. Value is in milliseconds. If the `cropStart` prop is applied, it will be applied from that point forward.
(If it is negative or undefined or null, it is ignored)
@@ -1048,7 +1050,7 @@ textTracks={[
### `showNotificationControls`
<PlatformsList types={['Android', 'iOS']} />
<PlatformsList types={['Android', 'iOS', 'web']} />
Controls whether to show media controls in the notification area.
For 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.

1
docs/pages/index.md
View File

@@ -8,6 +8,7 @@ It allows to stream video files (m3u, mpd, mp4, ...) inside your react native ap
- Exoplayer for android
- AVplayer for iOS, tvOS and visionOS
- Windows UWP for windows
- HTML5 for web
- Trick mode support
- Subtitles (embeded or side loaded)
- DRM support

9
docs/pages/installation.md
View File

@@ -181,3 +181,12 @@ Select RCTVideo-tvOS
Run `pod install` in the `visionos` directory of your project
</details>
<details>
<summary>web</summary>
Nothing 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.
</details>