Go to file
YangJH 69a7bc2d26
feat: implement enterPictureInPictureOnLeave prop for both platform (Android, iOS) (#3385)
* docs: enable Android PIP

* chore: change comments

* feat(android): implement Android PictureInPicture

* refactor: minor refactor code and apply lint

* fix: rewrite pip action intent code for Android14

* fix: remove redundant codes

* feat: add isInPictureInPicture flag for lifecycle handling

- activity provide helper method for same purpose, but this flag makes code simple

* feat: add pipFullscreenPlayerView for makes PIP include video only

* fix: add manifest value checker for prevent crash

* docs: add pictureInPicture prop's Android guide

* fix: sync controller visibility

* refactor: refining variable name

* fix: check multi window mode when host pause

- some OS version call onPause on multi-window mode

* fix: handling when onStop is called while in multi-window mode

* refactor:  enhance PIP util codes

* fix: fix FullscreenPlayerView constructor

* refactor: add enterPictureInPictureOnLeave prop and pip methods

- remove pictureInPicture boolean prop
- add enterPictureInPictureOnLeave boolean prop
- add enterPictureInPicture method
- add exitPictureInPicture method

* fix: fix lint error

* fix: prevent audio play in background without playInBackground prop

* fix: fix onDetachedFromWindow

* docs: update docs for pip

* fix(android): sync pip controller with external controller state

- for media session

* fix(ios): fix pip active fn variable reference

* refactor(ios): refactor code

* refactor(android): refactor codes

* fix(android): fix lint error

* refactor(android): refactor android pip logics

* fix(android): fix flickering issue when stop picture in picture

* fix(android): fix import

* fix(android): fix picture in picture with fullscreen mode

* fix(ios): fix syntax error

* fix(android): fix Fragment managed code

* refactor(android): remove redundant override lifecycle

* fix(js): add PIP type definition for codegen

* fix(android): fix syntax

* chore(android): fix lint error

* fix(ios): fix enter background handler

* refactor(ios): remove redundant code

* fix(ios): fix applicationDidEnterBackground for PIP

* fix(android): fix onPictureInPictureStatusChanged

* fix(ios): fix RCTPictureInPicture

* refactor(android): Ignore exception for some device ignore pip checker

- some device ignore PIP availability check, so we need to handle exception to prevent crash

* fix(android): add hideWithoutPlayer fn into Kotlin ver

* refactor(android): remove redundant code

* fix(android): fix pip ratio to be calculated with correct ratio value

* fix(android): fix crash issue when unmounting in PIP mode

* fix(android): fix lint error

* Update android/src/main/java/com/brentvatne/react/VideoManagerModule.kt

* fix(android): fix lint error

* fix(ios): fix lint error

* fix(ios): fix lint error

* feat(expo): add android picture in picture config within expo plugin

* fix: Replace Fragment with androidx.activity

- remove code that uses Fragment, which is a tricky implementation

* fix: fix lint error

* fix(android): disable auto enter when player released

* fix(android): fix event handler to check based on Activity it's bound to

---------

Co-authored-by: jonghun <jonghun@toss.im>
Co-authored-by: Olivier Bouillet <62574056+freeboub@users.noreply.github.com>
2025-01-04 12:37:33 +01:00
.github chore: update bot feature req message (#4341) 2024-12-23 16:28:25 +01:00
android feat: implement enterPictureInPictureOnLeave prop for both platform (Android, iOS) (#3385) 2025-01-04 12:37:33 +01:00
docs feat: implement enterPictureInPictureOnLeave prop for both platform (Android, iOS) (#3385) 2025-01-04 12:37:33 +01:00
examples docs: link tv example (#4342) 2024-12-18 09:24:21 +01:00
ios feat: implement enterPictureInPictureOnLeave prop for both platform (Android, iOS) (#3385) 2025-01-04 12:37:33 +01:00
scripts chore: enhance CI tests (#3344) 2023-12-02 15:58:43 +01:00
src feat: implement enterPictureInPictureOnLeave prop for both platform (Android, iOS) (#3385) 2025-01-04 12:37:33 +01:00
windows Merge branch 'master' into sdkVersion 2023-09-19 09:09:13 +02:00
.eslintignore chore: lint project (#3279) 2023-10-07 12:56:35 +02:00
.eslintrc fix: ensure poster works as expected and add it to the sample (#3643) 2024-04-05 10:35:57 +02:00
.gitignore feat: add typescript (#3266) 2023-10-06 18:39:14 +02:00
.nvmrc feat: added .nvmrc 2023-07-19 16:21:12 +09:00
.prettierrc feat: add typescript (#3266) 2023-10-06 18:39:14 +02:00
.release-it.json fix: fix bad package release process (#3347) 2023-11-15 21:39:34 +01:00
app.plugin.js feat: add expo plugins (#3933) 2024-07-10 11:49:13 +02:00
CHANGELOG.md chore: release v6.8.2 2024-11-25 21:36:30 +01:00
CONTRIBUTING.md chore: update CONTRIBUTING.md 2024-10-26 15:16:41 +02:00
LICENSE Update copyright 2022-06-22 06:35:04 +00:00
package.json chore: release v6.8.2 2024-11-25 21:36:30 +01:00
react-native-video.podspec feat(fabric): updated ios podspec for implementing new architecture (#3961) 2024-07-02 10:56:14 +02:00
README.md chore: update docs link (#4242) 2024-11-07 09:28:20 +01:00
shell.nix Add react-native-web support (#3958) 2024-11-13 21:19:57 +01:00
tsconfig.build.json feat: add typescript (#3266) 2023-10-06 18:39:14 +02:00
tsconfig.json feat: add expo plugins (#3933) 2024-07-10 11:49:13 +02:00

react-native-video

🎬 <Video> component for React Native

Documentation

documentation is available at docs.thewidlarzgroup.com/react-native-video/

Examples

You can find several examples demonstrating the usage of react-native-video here.
These include a basic usage and DRM example (with a free DRM stream).

Usage

// Load the module

import Video, {VideoRef} from 'react-native-video';

// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.

const VideoPlayer = () => {
 const videoRef = useRef<VideoRef>(null);
 const background = require('./background.mp4');

 return (
   <Video 
    // Can be a URL or a local file.
    source={background}
    // Store reference  
    ref={videoRef}
    // Callback when remote video is buffering                                      
    onBuffer={onBuffer}
    // Callback when video cannot be loaded              
    onError={onError}               
    style={styles.backgroundVideo}
   />
 )
}

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

Community support

We have an discord server where you can ask questions and get help. Join the discord server

Enterprise Support

📱 react-native-video is provided as it is. For enterprise support or other business inquiries, please contact us 🤝. We can help you with the integration, customization and maintenance. We are providing both free and commercial support for this project. let's build something awesome together! 🚀

TheWidlarzGroup