ihmpavel / expo-video-player

Customizable Video Player controls for Expo

Hi 👋, I'm Pavel

Student, developer & entrepreneur from Czechia 🇨🇿

My repositories:

Languages and Tools:

and more...

expo-video-player's Issues

Does video player support youtube link?

@react-native-community/slider Isn't support on Expo

Hi, I got error : Invariant Violation: requireNativeComponent: "RNCSlider" was not found in the UIManager, using version 1.5.6. Looks like @react-native-community/slider doesn't work with Expo projects.

Please see:
expo/expo#4300

inFullscreen={true} triggers the switchToLandscape callback

Observed Behaviour

When launching the example app from the README, the bottom-right icon for launching into fullscreen mode is visible. When clicking that button a suggestion is given to use ScreenOrientation to switch the screen into Landscape orientation.

Expected Behaviour

As I set the video with inFullscreen={true} I would have expected to see the exit fullscreen button. When clicking it I would have expected to see the suggestion to use ScreenOrientation to switch the screen into Portrait orientation.

I do get the expected behaviour when setting the inFullscreen prop to false. From my current understanding the boolean logic should be switched to solve this issue.

Do I have a misunderstanding? Thanks for the support! :)

How to resume the video if one turns off the internet and then turns on

expo-video-player not working for expo version 36

App crashing when using expo-video-player

Video Player Not Working After Build on Android

In android (after the build and got the apk file) I installed the APK file on emulator/real device. This is what happened when I open the app.

Without building APK file it working fine on emulator and real device. But when I got the APK file and after install it this error happened.

I mentioned below my code. Please help me to solve this.

THIS ISSUE ONLY HAPPEN WHEN BUILD THE APK FILE FOR ANDROID AND ONLY IN LANDSCAPE MODE!

Customizable components

I need to add rate changer button after slider, how can i do it?

iOS: Sporadically, video doesn't load with infinite spinner (iPhone SE) or NSURLErrorDomain error

Describe the bug
iOS: Sporadically, video doesn't load with infinite spinner (iPhone SE) or NSURLErrorDomain error

To Reproduce
Steps to reproduce the behavior:

1. https://snack.expo.io/@git/github.com/kevgrig/testvideo
2. Open on iOS
3. Sometimes, the video shows an error with NSURLErrorDomain

Expected behavior
Video always loads as on Android.

Additional infofmation:

• Type: Simulator, Expo, Snack, Real device
• Device: iOS
• OS: Any
• Package version [e.g. 1.0.0]: 1.5.7
• Expo version (in app.json): 36.0.0
• Expo CLI version: 3.13.1

Additional context
Source: https://github.com/kevgrig/testvideo/blob/master/App.js
Carousel: https://github.com/archriss/react-native-snap-carousel

Screenshots (if applicable)

NetInfo issue

Hello and thank you for this package, I almost published on myself, you saved me heaps of time!

I just installed it and tried it but I am getting this error:

Trying to subscribe to unknown event: "function (_ref) {
        var isConnected = _ref.isConnected;
        setIsOnline(isConnected);
        debug && console.info("User is " + (isConnected ? 'on' : 'off') + "line");
      }"

Which leads to this:

TypeError: TypeError: NetInfoListener is not a function. (In 'NetInfoListener()', 'NetInfoListener' is an instance of Object)

Looks like NetInfo needs linking, so it's not compatible with expo without ejecting?

Unable to attach a Ref to video player.

Describe the bug
I am trying to put a ref on the video player so that I can stop/play programatticaly. However it just keeps giving me typescript errors.

To Reproduce
In a typescript project try to attach a ref as a property of the VideoPlayer I get:

Property 'ref' does not exist on type 'IntrinsicAttributes & Pick<Props, "videoProps"> & { children?: null; playIcon?: () => Element; pauseIcon?: () => Element; spinner?: () => Element; ... 21 more ...; showControlsOnLoad?: boolean; }'.ts(2322)

<VideoPlayer
        height={isTablet ? 525 : 300}
	inFullscreen={false}
	quickFadeOutDuration={420}
	videoProps={{
		shouldPlay: true,
		resizeMode: 'contain',
		source: {
			uri: videoSource
		},
        }}
        ref={}
	switchToLandscape={fullScreenMode}
	width={screenDimensions.width}
/>

I also saw an example somewhere I thought (can't find it now) of someone attaching it in the videoprops object but that also throws an error and looking at the videoprops type interface it is not in there either.

Not sure if this is a bug (more likely I am just not doing something right)

Expected behavior
A ref to be assignable to the video player component.

Additional infofmation:

• Type: Real Devices
• Device: iPhone XS and NVIDIA Shield Tablet
• OS: iOS13 - Android 7
• Package version: 1.5.7
• Expo version: 37
• Expo CLI version: 3.17.16

Screenshots (if applicable)

java.lang.IllegalStateException using demo app or by following instructions.

Describe the bug

Java exception when trying to load video element.
(I might be missing something in the docs about this not working on emulators/simulators)

Does work on real phones tried this on both iOS and Android.

Logs:

Error: , Encountered a fatal error during playback: java.lang.IllegalStateException, Fatal, Object {}
* [native code]:null in __expoConsoleLog
- node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
- node_modules/expo/build/environment/muteWarnings.fx.js:27:4 in error
- node_modules/expo-video-player/dist/index.js:71:19 in defaultProps.errorCallback
- node_modules/expo-video-player/dist/index.js:163:25 in updatePlaybackCallback
- node_modules/expo-av/build/Video.js:58:31 in _handleNewStatus
* http://192.168.1.95:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:204801:32 in _nativeOnError
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:286:4 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:497:2 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:521:2 in invokeGuardedCallbackAndCatchFirstError
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:683:41 in executeDispatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:707:19 in executeDispatchesInOrder
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:872:28 in executeDispatchesAndRelease
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:853:4 in forEachAccumulated
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:897:20 in runEventsInBatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:1069:18 in runExtractedPluginEventsInBatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2835:35 in batchedUpdates$argument_0
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20569:13 in batchedUpdates$1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2731:29 in batchedUpdates
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2834:16 in _receiveRootNodeIDEvent
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2854:25 in receiveEvent
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:425:19 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:373:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

`

To Reproduce
Steps to reproduce the behavior:

1. Clone repo
2. cd to example-app
3. yarn install
4. yarn start
5. Run in simulator

Expected behavior
The Video should play without throwing an error.

Additional infofmation:

• Simulated Device - tied on multiple simulated devices all android.
• Device: [Nxus 6, Pixel 4]
• OS: [5.1]
• Expo version (SDK 38)
• Expo CLI version: 3.23.2

Additional context
This breaks on demo exactly the same way.

Screenshots (if applicable)

Proprietary app:

Example app from this repo(straight yarn install and run):

Uncaught error

    "expo": "^34.0.1",
    "expo-av": "^6.0.0",
    "expo-video-player": "^1.5.0",
    "react": "16.8.6",
    "react-dom": "^16.8.6",
    "react-native": "0.60.5",

In keeping with I being unable to run video tags, this came up today.
any idea how to go about it ?

Uncaught TypeError: Cannot read property 'Video' of undefined
    at App.render (App.js:18)
    at finishClassComponent (react-dom.development.js:17039)
    at updateClassComponent (react-dom.development.js:16994)
    at beginWork$1 (react-dom.development.js:18505)
    at HTMLUnknownElement.callCallback (react-dom.development.js:347)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
    at invokeGuardedCallback (react-dom.development.js:454)
    at beginWork$$1 (react-dom.development.js:23217)
    at performUnitOfWork (react-dom.development.js:22211)
    at workLoopSync (react-dom.development.js:22185)
    at renderRoot (react-dom.development.js:21878)
    at scheduleUpdateOnFiber (react-dom.development.js:21419)
    at scheduleRootUpdate (react-dom.development.js:24319)
    at updateContainerAtExpirationTime (react-dom.development.js:24347)
    at updateContainer (react-dom.development.js:24436)
    at react-dom.development.js:24963
    at unbatchedUpdates (react-dom.development.js:21687)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24962)
    at render (react-dom.development.js:25042)
    at renderApplication (renderApplication.js:21)
    at Object.run (index.js:49)
    at Function.runApplication (index.js:89)
    at registerRootComponent (registerRootComponent.web.js:9)
    at Module.../../../../../../../../../Documents/Englishvid/node_modules/expo/AppEntry.js (AppEntry.js:10)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Object.0 (module.js:22)
    at __webpack_require__ (bootstrap:724)
    at bootstrap:791
    at bootstrap:791
render @ App.js:18
finishClassComponent @ react-dom.development.js:17039
updateClassComponent @ react-dom.development.js:16994
beginWork$1 @ react-dom.development.js:18505
callCallback @ react-dom.development.js:347
invokeGuardedCallbackDev @ react-dom.development.js:397
invokeGuardedCallback @ react-dom.development.js:454
beginWork$$1 @ react-dom.development.js:23217
performUnitOfWork @ react-dom.development.js:22211
workLoopSync @ react-dom.development.js:22185
renderRoot @ react-dom.development.js:21878
scheduleUpdateOnFiber @ react-dom.development.js:21419
scheduleRootUpdate @ react-dom.development.js:24319
updateContainerAtExpirationTime @ react-dom.development.js:24347
updateContainer @ react-dom.development.js:24436
(anonymous) @ react-dom.development.js:24963
unbatchedUpdates @ react-dom.development.js:21687
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962
render @ react-dom.development.js:25042
renderApplication @ renderApplication.js:21
run @ index.js:49
runApplication @ index.js:89
registerRootComponent @ registerRootComponent.web.js:9
../../../../../../../../../Documents/Englishvid/node_modules/expo/AppEntry.js @ AppEntry.js:10
__webpack_require__ @ bootstrap:724
fn @ bootstrap:101
0 @ module.js:22
__webpack_require__ @ bootstrap:724
(anonymous) @ bootstrap:791
(anonymous) @ bootstrap:791
index.js:1 The above error occurred in the <App> component:
    in App (at withExpoRoot.web.js:8)
    in RootErrorBoundary (at withExpoRoot.web.js:7)
    in ExpoRootComponent (at registerRootComponent.web.js:6)
    in RootComponent
    in div (created by View)
    in View (created by AppContainer)
    in div (created by View)
    in View (created by AppContainer)
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, RootErrorBoundary.
console.<computed> @ index.js:1
error @ muteWarnings.fx.js:26
logCapturedError @ react-dom.development.js:19814
logError @ react-dom.development.js:19850
update.payload @ react-dom.development.js:20941
getStateFromUpdate @ react-dom.development.js:12758
processUpdateQueue @ react-dom.development.js:12871
resumeMountClassInstance @ react-dom.development.js:13513
updateClassComponent @ react-dom.development.js:16990
beginWork$1 @ react-dom.development.js:18505
beginWork$$1 @ react-dom.development.js:23193
performUnitOfWork @ react-dom.development.js:22211
workLoopSync @ react-dom.development.js:22185
renderRoot @ react-dom.development.js:21878
scheduleUpdateOnFiber @ react-dom.development.js:21419
scheduleRootUpdate @ react-dom.development.js:24319
updateContainerAtExpirationTime @ react-dom.development.js:24347
updateContainer @ react-dom.development.js:24436
(anonymous) @ react-dom.development.js:24963
unbatchedUpdates @ react-dom.development.js:21687
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24962
render @ react-dom.development.js:25042
renderApplication @ renderApplication.js:21
run @ index.js:49
runApplication @ index.js:89
registerRootComponent @ registerRootComponent.web.js:9
../../../../../../../../../Documents/Englishvid/node_modules/expo/AppEntry.js @ AppEntry.js:10
__webpack_require__ @ bootstrap:724
fn @ bootstrap:101
0 @ module.js:22
__webpack_require__ @ bootstrap:724
(anonymous) @ bootstrap:791
(anonymous) @ bootstrap:791
Show 3 more frames
index.js:1 TypeError: Cannot read property 'Video' of undefined
    at App.render (App.js:18)
    at finishClassComponent (react-dom.development.js:17039)
    at updateClassComponent (react-dom.development.js:16994)
    at beginWork$1 (react-dom.development.js:18505)
    at HTMLUnknownElement.callCallback (react-dom.development.js:347)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
    at invokeGuardedCallback (react-dom.development.js:454)
    at beginWork$$1 (react-dom.development.js:23217)
    at performUnitOfWork (react-dom.development.js:22211)
    at workLoopSync (react-dom.development.js:22185)
    at renderRoot (react-dom.development.js:21878)
    at scheduleUpdateOnFiber (react-dom.development.js:21419)
    at scheduleRootUpdate (react-dom.development.js:24319)
    at updateContainerAtExpirationTime (react-dom.development.js:24347)
    at updateContainer (react-dom.development.js:24436)
    at react-dom.development.js:24963
    at unbatchedUpdates (react-dom.development.js:21687)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24962)
    at render (react-dom.development.js:25042)
    at renderApplication (renderApplication.js:21)
    at Object.run (index.js:49)
    at Function.runApplication (index.js:89)
    at registerRootComponent (registerRootComponent.web.js:9)
    at Module.../../../../../../../../../Documents/Englishvid/node_modules/expo/AppEntry.js (AppEntry.js:10)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Object.0 (module.js:22)
    at __webpack_require__ (bootstrap:724)
    at bootstrap:791
    at bootstrap:791

Responsiveness on Android

The touch responsiveness for play/pause is very difficult on Android. I'm assuming this is due to the animation fadeOut/fadeIn as they do not work the same as on iOS.

Below is an example of my VideoPlayer code.

                    <VideoPlayer
                        videoProps={{
                            ref: v => (howToSetupVideoRef.current = v),
                            shouldPlay: false,
                            resizeMode: Video.RESIZE_MODE_CONTAIN,
                            source: {
                                uri: videoSource
                            },
                            posterSource: {
                                uri: FULL_SETUP_VIDEO_POSTER
                            },
                            usePoster: true
                        }}
                        width={screenWidth}
                        height={screenWidth * (1/MEDIA_ASPECT_RATIO)}
                        hideControlsTimerDuration={2000}
                        disableSlider={true}
                        showFullscreenButton={false}
                        fadeOutDuration={500}
                        showControlsOnLoad={true}
                    />

Changing the fade out duration props does not change Android behavior but will change out iOS behavior.

Additional infofmation:

• Type: Real Device
• Device: Comparing iPhone X to Samsung Galaxy S8
• Expo: 37

Error: Audio mode attempted to be set without the required keys

Error: , setAudioModeAsync error, 1, [Error: Audio mode attempted to be set without the required keys: ["staysActiveInBackground"]]

Outdated dependency on "expo"

Expo's video component has moved to "expo-av" earlier this year: https://github.com/expo/expo/tree/master/packages/expo-av

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

I'm trying to play a video following the steps from expo-video-player however i can't run the component. Always display the same error and i don't idea that how i can fix it. i only test Android Device

You can see on this Snack example:

app.json:
"sdkVersion": "34.0.0",
package.json:

"expo": "^34.0.3",
"expo-av": "^6.0.0",
"expo-video-player": "^1.2.0",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",

Error result:

Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of VideoPlayer.

• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5716:10 in createFiberFromTypeAndProps
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5744:4 in createFiberFromElement
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:8318:12 in createChild
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:8661:10 in reconcileChildrenArray
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:10994:6 in reconcileChildren
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11755:4 in updateHostComponent
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17276:21 in performUnitOfWork
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17316:41 in workLoop
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17417:15 in renderRoot
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18423:17 in performWorkOnRoot
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18324:24 in performWork
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18285:14 in performSyncWork
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18169:19 in requestWork
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17969:16 in scheduleWork
• node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:6934:17 in enqueueSetState
• node_modules/react/cjs/react.development.js:335:31 in setState
• node_modules/react-navigation/src/createNavigationContainer.js:342:22 in dispatch
• node_modules/react-native-router-flux/src/navigationStore.js:891:31 in dispatch
• node_modules/react-native-router-flux/src/navigationStore.js:908:18 in push
• node_modules/react-native-router-flux/src/navigationStore.js:902:17 in execute

• src/components/newProgram/home/index.js:353:21 in

• node_modules/@firebase/database/dist/cjs/src/api/Query.js:244:51 in onceCallback
• node_modules/@firebase/database/dist/cjs/src/core/view/EventRegistration.js:65:26 in
• ... 21 more stack frames from framework internals

Set video orientation to landscape or portrait

How to set the orientation to landscape or portrait on switchToLandscape or switchToPortrait callback?

OMX.Exynos.avc.dec

Error: , Encountered a fatal error during playback: com.google.android.exoplayer2.g.b$a: Decoder init failed: OMX.Exynos.avc.dec, Format(1, null, null, video/avc, null, -1, null, [1280, 720, -1.0], [-1, -1]), Fatal, Object {}

• node_modules\expo\build\logs\LogSerialization.js:166:14 in _captureConsoleStackTrace
• node_modules\expo\build\logs\LogSerialization.js:41:24 in serializeLogDataAsync$
• ... 9 more stack frames from framework internals

Hello, I am having an error when using.
Please help me!
Thank you!

how to handle events when video is no longer in view

I have this component in a flat list, my question is how can i stop the video from playing once
the flatlist item is no longer in view i.e for example i scrolled to another item.

Component Dimensions

if there a way of setting my own custom dimensions to the VideoPlayer Component?
it looks like it is reading the width and height of the device and forcing the component to be in full screen with a black backdrop. I would like the video to only occupy a specified section of the screen and not have it in full screen.
Also, when l have the bottomNavigation on the same page the controls are hidden.

Add onPress() event to Component

In order to get more control on the VideoPlayer Component, I would like to handle the action when an User presses on the Component (the video itself without considering the controls) via an event like onPress().

Is it possible to use this offline with a link to a file?

Is it possible to use this offline with a link to a file?

[BUG - WITH SOLUTION] - videoRef use is ambiguous in examples available and documentation.

Currently creating a standard ref and passing this to videoRef doesn't give me a current ref state. i.e myVideoRef.current == null

Update the examples with an example of how to use videoRef or update the docs.
Would be happy to do this and submit a PR if I could figure out what really needs to be passed to videoRef param as a value.

        constructor(props) {                                                                                                                       
            super(props);                                                                                                                           
            this.videoRef = React.createRef();                                                                                                      
            this.state = {                                                                                                                          
            };                                                                                                                                      
          }; 

          <VideoPlayer                                                                                                                      
            videoProps={{                                                                                                                   
              shouldPlay: false,                                                                                                            
              resizeMode: Video.RESIZE_MODE_CONTAIN,                                                                                        
              source: {                                                                                                                     
                uri: this.props.navigation.state.params.videoUrl,                                                                           
              },                                                                                                                            
            }}                                                                                                                              
            videoRef={this.videoRef}                                                                                                 
            isLooping={true}                                                                                                                
            inFullscreen={true}                                                                                                             
            videoBackground='transparent'                                                                                                   
            height={height}                                                                                                                 
            width={width}                                                                                                                   
            showControlsOnLoad={true}                                                                                                       
          />   

Result after rendering video:
this.videoRef == Object { "current": null }

Further investigation:
In the code - type is Video for videoRef?
Docs seem to expect a ref as the type. Not sure I understand how I would pass a Video component to videoRef param in a VideoPlayer component. This is what is making me a little confused.

Any help would be awesome - thanks.

Unable to resolve "@react-native-community/netinfo" from "node_modules/expo-video-player/dist/index.js"

Unable to resolve "@react-native-community/netinfo" from "node_modules/expo-video-player/dist/index.js" - shows up after running expo install expo-video-player.

EDIT: I fixed that issue by running expo install @react-native-community/netinfo

Subtitle

Hello.

Does your video player support subtitle (ie. .srt files)?

Can't perform a React state update on an unmounted component

bug

11:48
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
bug error

intent

I want to use the modal-box to play the video by clicking on the video-image list. So I wrote openVideoFunc to switch video-URL and show/hide modal-box.

code （In order to facilitate reading, part of the code has been simplified (style, etc.)）

// Require local img
const image1 = require('./assets/img/1.jpg')
const image2 = require('./assets/img/2.jpg')
// Require local video
const video1 = require('./assets/video/1.mp4')
const video2 = require('./assets/video/2.mp4')
// array object for img/video
const videoRes = [{"videoId": 1,"videoUrl": video1,"posterUrl": image1,"title": "test1","describe": "test1......"},...]

export default function App() {

  const [visible, setVisible] = React.useState(false);
  const [videoUrl, setVideoUrl] = React.useState(null)

// Video Poster List

  const listItems = videoRes.map(item =>
    <TouchableOpacity onPress={() => openVideoFunc(item)} key={item.videoId}>
      <Layout>
        <Image source={item.posterUrl} />
      </Layout>
    </TouchableOpacity>
  )

//open video func

  const openVideoFunc = (item) => {

    setVideoUrl(item.videoUrl) //Switch video url
    setVisible(true) //open modal

  }

  return (

      <Layout>

        {listItems}

        <Modal visible={visible}>

            <Button onPress={() => setVisible(false)} /> //close modalbox           
            <VideoPlayer source: videoUrl /> //videoplayer

        </Modal>

      </Layout>

  );
}

version-Information

"expo-cli": 4.0.13
"expo": "^40.0.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "40.0.0",

None of callback of videos props getting called.

I tried with onPlaybackStatusUpdate, onReadyForDisplay none are working.,

Can't perform a React state update on an unmounted component

Describe the bug
When I Pause video and then navigate back from Player to previous view I got Warning:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, a useEffect cleanup function

Code of player is very simple:

const PlayerView = ({ route, navigation }: PlayerProps) => {

  const videoHeightOffset = 12

  const { width, height } = Dimensions.get('window')
  const playerHeight = (width < height ? width : height) - videoHeightOffset - Constants.statusBarHeight
  const playerWidth = width > height ? width : height

  return (

    <VideoPlayer
      videoProps={{
        shouldPlay: true,
        resizeMode: Video.RESIZE_MODE_COVER,
        source: {
          uri: 'https://mhplayertest.s3.eu-central-1.amazonaws.com/trailerMay3.mp4',
        },
      }}
      inFullscreen={true}
      videoBackground='transparent'
      height={playerHeight}
      width={playerWidth}
    />
    
  )
}

Additional infofmation:

• Type: Expo - Real device
• Device: iPhone 8 Plus
• OS: iOS 13.3.1
• Package version "expo-video-player": "^1.5.7"
• Expo version "expo": "~37.0.7"

Fullscreen - On Orientation Change player not updating

On orientation change player not updating its orientation

I have the following code to set the player to full screen and change its orientation based on device orientation.
but once the player goes into the landscape mode, it doesn't reset itself on orientation change.

<VideoPlayer
          videoProps={{
            shouldPlay: false,
            resizeMode: Video.RESIZE_MODE_CONTAIN,
            source: {
              uri:
                "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
            },
          }}
          isPortrait={true}
          inFullscreen={false}
          switchToLandscape={async () =>
            await ScreenOrientation.lockAsync(
              ScreenOrientation.OrientationLock.LANDSCAPE_LEFT
            )
          }
          showFullscreenButton={true}
          fullscreenExitIcon={<Button>click me </Button>}
          switchToPortrait={async () =>
            await ScreenOrientation.lockAsync(
              ScreenOrientation.OrientationLock.DEFAULT
            )
          }
          showControlsOnLoad={true}
        />

Also, I am not able to see the buttons (native & custom button) in the full-screen mode.

To Reproduce
Steps to reproduce the behavior:

1. run the app
2. when the video plays for the first time, click on the default full-screen button
3. It will go into the full-screen mode i.e landscape without considering the device orientation

Expected behavior
The video player should come back to the portrait view on device orientation change.
Additional infofmation:

• Type: Real Device
• Device: Huawei
  Expo CLI 3.21.13 environment info:
  System:
  OS: macOS 10.15.4
  Shell: 3.2.57 - /bin/bash
  Binaries:
  Node: 12.18.1 - /usr/local/bin/node
  npm: 6.14.5 - /usr/local/bin/npm
  Watchman: 4.9.0 - /usr/local/bin/watchman
  IDEs:
  Android Studio: 3.6 AI-192.7142.36.36.6308749
  Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  npmGlobalPackages:
  expo-cli: 3.21.13

Video-player icons are broken on Android when font is set to ''

Describe the bug
The video-player icons are broken on Android : they display Chinese characters or a cross in a box.

To Reproduce
Nothing much, install and try on Android.

Expected behavior
Icons should display correctly, just like on iOS

Additional infofmation:

• Type: Real device
• Device: Samsung Galaxy XCover 4
• OS: Android 9
• Package version ^1.6.1
• I'm not using Expo, it's a bare project

I already tried : updating my dependencies, manually linking react-native-vector-icons, editing android/app/build.gradle, rebooting, cleaning and rebuilding

It works just right on iOS, but I can't get the icons to work properly on Android. I don't really know what to do else and I suspect it's an issue with my project configuration, but I'm unable to pinpoint the culprit.

FullScreen video on Android

Describe the bug
When passing useNativeControls to videoProps on Android the video does not fit properly to device. The video zooms in a bit cutting off edges.

To Reproduce
Steps to reproduce the behavior:

1. Pass useNativeControls={true} to videoProps
2. Click full screen option in bottom right corner

Expected behavior
Should perform as iOS does and fit video to screen size of device. Should not zoom in.

Additional infofmation:

• Samsung Galaxy s7 (physical device)

not hide icon when the source is changed replayIcon

Describe the bug
I basically made a function to change the source when the video is finished playing, but the replay icon never hiden

To Reproduce
Steps to reproduce the behavior:
use playbackCallback to get finish video play and change source.

Is it possible to have more control on event ExitFullScreen ?

Hi guys !,
I'm developing an application with some videos in it. Thanks to you, we have a pretty simple way to handle videos :)

Problem
My application was designed and locked is PORTRAIT mode.
When someone wants to see a video in fullscreen and when he clicks on the fullscreen button, I have to change the screen orientation behavior (thanks too the ScreenOrientation API exposed by expo :D ).
It's pretty ok to enter in fullscreen mode, but when the user click on the button to exit fullscreen mode, the video is exiting, and just quickly after it, we can see the application switching from landscape to portrait. It's pretty ugly :/

Describe the solution you'd like
Is it possible to listen the "click" on the ExitFullscreen button, to change the orientation before the video really exit fullscreen mode ?

Describe alternatives you've considered
I didn't find alternatives, or different way to handle my problem :/

Additional context
Working with:

• Expo sdk 36.0.0
• expo-video-player 1.5.7

Thanks ! :)

useNetInfo is not exported from '@react-native-community/netinfo'

Attempted import error: 'useNetInfo' is not exported from '@react-native-community/netinfo'.

Copy / pasted your example.

Works on iPhone Expo Client. Get above error in browser.

iOS: Video width is greater than expected

Describe the bug
iOS: Video width is greater than expected. It should be 80% of the viewport width but it's more. Android works properly.

To Reproduce
Steps to reproduce the behavior:

1. https://snack.expo.io/@git/github.com/kevgrig/testvideo
2. Open on iOS
3. Observe width is greater than 80% of viewport width.

Expected behavior
Video always correct width as on Android.

Additional infofmation:

• Type: Simulator, Expo, Snack, Real device
• Device: iOS
• OS: Any
• Package version [e.g. 1.0.0]: 1.5.7
• Expo version (in app.json): 36.0.0
• Expo CLI version: 3.13.1

Additional context
Source: https://github.com/kevgrig/testvideo/blob/master/App.js
Carousel: https://github.com/archriss/react-native-snap-carousel

Screenshots (if applicable)

Masking video image on changing screen

Hello,

I would like to keep the video progress from one screen to the other.
Is there a way to show the video on one screen, and when changing screen, keeping the audio but masking the video?
I have already tried to use VideoRef from expo AV but I am struggling in keeping the progress of the video when changing screen.

Thanks in advance!

Can width and height props be in percentage ?

Can we have the width and height props of the video component be in percentage instead of numbers ?

Unable to play youtube videos

Describe the bug
After applying basic config can't play videos from youtube.

To Reproduce

import { Video } from "expo-av";
import VideoPlayer from "expo-video-player";

...

<VideoPlayer
videoProps={{
shouldPlay: true,
resizeMode: Video.RESIZE_MODE_CONTAIN,
source: {
uri: "https://www.youtube.com/watch?v=R9nvEFAvMBA",
},
}}
inFullscreen={true}

Displayer error:

Error: , Encountered a fatal error during playback: d.g.b.d.q0.f0: None of the available extractors (e, g, i, e, g, e, d0, c, d, w, b, b) could read the stream., Fatal, Object {}

Expected behavior
Play Video

Additional infofmation:

• Type: Expo/Real device (Android)
• Device: Redmi Note 9 Pro
• OS: Mac OS
• Package version: @latest
• Expo version: "^38.0.0", "^39.0.0",
• Expo CLI version: 3.27.8

Additional context
Video from example is working normally

Can't play youtube videos

Describe the bug
After applying basic config can't play videos from youtube.

To Reproduce

import { Video } from "expo-av";
import VideoPlayer from "expo-video-player";

...

<VideoPlayer
videoProps={{
shouldPlay: true,
resizeMode: Video.RESIZE_MODE_CONTAIN,
source: {
uri: "https://www.youtube.com/watch?v=R9nvEFAvMBA",
},
}}
inFullscreen={true}
/>

Displayer error:

Error: , Encountered a fatal error during playback: d.g.b.d.q0.f0: None of the available extractors (e, g, i, e, g, e, d0, c, d, w, b, b) could read the stream., Fatal, Object {}

Expected behavior
Play Video

Additional infofmation:

• Type: Expo/Real device (Android)
• Device: Redmi Note 9 Pro
• OS: Mac OS
• Package version: @latest
• Expo version: "^38.0.0", "^39.0.0",
• Expo CLI version: 3.27.8

Additional context
Video from example is working normally

Video Player slider time of video at 00:00 far from left on IOS?

this is the player on iphone x:

       <VideoPlayer
            ref={videoRef}
            showControlsOnLoad
            useNativeControls
            videoProps={{
              shouldPlay: false,
              resizeMode: ExpoVideo.RESIZE_MODE_STRETCH,
              source: {
                uri: videoData.playback.hls,
              },
              ref: (v) => (videoRef = v),
              onPlaybackStatusUpdate,
              usePoster: true,
            }}
            sliderColor='#12153D'
            style={{ marginLeft: -10, marginRight: -10 }}
            inFullscreen={false}
            height={270}
            width={width}
            switchToLandscape={showVideoInFullscreen}
          />

Screenshots:

the circle is far from left at 0, how do i fix this?

Video Ads

Hi,

Is the player capable of showing Ads (Vast Compliance) ?

Is there a way to set the width and height?

Hi, thanks for creating this. Is there a way to set width and height? I'd like the video to fill the container that it's in, but it's overflowing. I took a quick look at the code and it seems width and height are based on window dimensions. Any ways around this?

Video controls not fully in viewport

Hi,

It seems the video player isn't correctly displayed inside the viewport. See below for code and screenshot.

Do you have any advice for positioning the video player so the controls correctly display?

Thanks

<View style={{flex: 1, height: '100%', justifyContent: 'center', alignItems: 'center'}}>
                        <VideoPlayer
                            videoProps={{
                                shouldPlay: true,
                                resizeMode: Video.RESIZE_MODE_CONTAIN,
                                source: {
                                    uri: this.state.url,
                                },
                            }}
                            showControlsOnLoad={true}
                            inFullscreen={true}
                            showFullscreenButton={false}
                        />
                    </View>

Unable to get player working

Unable to play any videos.

Receiving error: 'ExceptionsManager.js:126 Error: Encountered a fatal error during playback: The server is not correctly configured. - The AVPlayerItem instance has failed with the error code -11850 and domain "AVFoundationErrorDomain".'

I tried my own code and your example and receive the same error each time. I also tried different video URLs.

Expect a video to load and play

Expo CLI 3.16.1 environment info:
System:
OS: macOS 10.15
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.14.0 - ~/.nvm/versions/node/v12.14.0/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.13.4 - ~/.nvm/versions/node/v12.14.0/bin/npm
IDEs:
Xcode: /undefined - /usr/bin/xcodebuild
npmPackages:
expo: ~36.0.0 => 36.0.2
react: ~16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4
react-navigation: ^4.3.3 => 4.3.3
npmGlobalPackages:
expo-cli: 3.16.1

The issue occurs on all devices ad emulators

Any help or advice would be great.

import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { Video } from "expo-av";
import VideoPlayer from "expo-video-player";

Player = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  return (
    <View style={styles.container}>
      <Text>isPlaying: {JSON.stringify(isPlaying)}</Text>
      <VideoPlayer
        videoProps={{
          width: 250,
          height: 250,
          shouldPlay: true,
          resizeMode: Video.RESIZE_MODE_CONTAIN,
          source: {
            uri: "https://youtu.be/S9VjeIWLnEg"
          }
        }}
        inFullscreen={false}
        playbackCallback={status => {
          if (isPlaying !== status.isPlaying) {
            setIsPlaying(status.isPlaying);
          }
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 80
  }
});

export default Player;

Using multiple video player instance

I am using multiple video player instances in the list, is there any way to stop the previous video and play the new one on the play button?

Cannot show poster image

Firstly,Thanks for your video player!
i used your expo-video-play, and i add poster props like that
videoProps={{
shouldPlay: false,
resizeMode: Video.RESIZE_MODE_COVER,
source: {
uri: myurl,
},
posterSource: {
uri: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
},
}}
inFullscreen={false}
showControlsOnLoad={true}
showFullscreenButton={true}
videoBackground='transparent'
width={widthSize}
height={heightSize}
but, poster cannot display, i tried to use local image by require("/assets/images/picture.jpg"). but errors that require variable.
and help me how to navigation to new screen when show full screen in video.
Expo sdk 37
Expo AV
thanks

Add way to call playbackStatus event, whenever video is finished

Here's what I mean:

<VideoPlayer
       videoProps={{
                shouldPlay: true,
                resizeMode: Video.RESIZE_MODE_COVER,
                source: { uri: this.props.data.video },
                onPlaybackStatusUpdate: { (playbackStatus) => this.callern(playbackStatus) } 
       }}
       //onPlaybackStatusUpdate={(playbackStatus) => this.callern(playbackStatus)}
       inFullscreen={false}
       showControlsOnLoad={true}
       showFullscreenButton={false}
       width={this.state.width}
       height={350}
/>

I would need something that will allow me to call this.callern(playbackStatus) whenever video changes playbackStatus. Or to call X function whenever Video finishes.

Thank you.

Android: Play button not centered and play controls cut off with Carousel

Describe the bug
Android: Play button not centered and play controls cut off with Carousel.

To Reproduce
Steps to reproduce the behavior:

1. https://snack.expo.io/@git/github.com/kevgrig/testvideo
2. Open on Android
3. Observe play button is not centered
4. Observe end duration and fullscreen components are not visible.

Expected behavior
Video content is constrained to the Carousel width as other components in a Carousel act correctly.

Additional infofmation:

• Type: Simulator, Expo, Snack, Real device
• Device: Android
• OS: Any
• Package version [e.g. 1.0.0]: 1.5.7
• Expo version (in app.json): 36.0.0
• Expo CLI version: 3.13.1

Additional context
Source: https://github.com/kevgrig/testvideo/blob/master/App.js
Carousel: https://github.com/archriss/react-native-snap-carousel

Screenshots (if applicable)

Click the full screen button: `Pass your logic to'switchToLandscape' prop`

I encountered 3 problems:

Q1. Triggering the full screen button is invalid and an error is reported;
Q2. The video is still playing when I go to other pages;
Q3. When I return to the video page, the video screen displays black.

my snack

Q1.in my genymotion: Pass your logic to'switchToLandscape' prop

Q2. In a video list, I think that when no one wants to click on the next video, the previous video is still playing or when you go to other pages, the video is still playing.

Q3. When I return to the video page, the video screen displays black. Don't want this blank board.

Not able to see exit icon

Hi, i am not able to see any exit icon i tried this

<VideoPlayer
                videoProps={{
                  shouldPlay: true,
                  resizeMode: Video.RESIZE_MODE_CONTAIN,
                  source: {
                    uri: 'some dummy url'
                  },
                }}
                showFullscreenButton={true}
                
              />

i can't see exit button or any other way to go back