itsnubix / react-native-video-controls Goto Github PK

Hi,

Currently we have to drag the seek handle to move to a position in the seekbar. It will be great if we are able to seek to a position with a touch anywhere on the seekbar.

Hi
with the newer version of React, react-native-video had to be updated to support onProgress and onLoad, but the controls are no longer working and the app crashes when trying to render.
To reproduce it, juste replace your dependency
"react-native-video": "^0.9.0" to
"react-native-video": ""git+https://github.com/react-native-community/react-native-video.git#master""

Thanks for your help

I'm working with react-native 0.41.2. On android, I cannot get the video to go full screen when clicking on the full screen icon. It only fills its parent's view instead of the entire screen. I'm sure this is probably a CSS issue but I can't figure it out. Does anyone have any advice for me? I'm new to react-native so I'm sure I'm missing something.

Hi. I'm using react-native-router-flux instead of Navigator so I'm not passing a navigator prop to the video.

The video starts up (I can hear the audio) but it's not visible at all. Is this related?

Please help, audio is not working on iPhone but works on emulator.

Well done 👍
But I think that react-native-video should be a peer-dependency instead of a normal dependency.
See https://nodejs.org/en/blog/npm/peer-dependencies/

Everything work ok but seekbar didn't show on bottom controls.

I am using react-native-video-controls. How to make video to full screen of device?

Volume keys and progress bars are hard to drag

Hello,

I tried your player on both device IOS&Android.
But Seekbar doesn't show on Android, working great on IOS

Maybe it's a problem with styles.sheets? don't really know..

Currently it's not possible to restart an already finished playback.

using this.ref.seek(0) it's possible to reset the Video state, but playback will not start again

It's easy to acheive playback to be started by handling props changes that would change the paused state set from props in the constructor

is this support for react native 0.49? i try this, but video cant load.

Expected
The background of the top/bottom control bars should be subtle gradients

Actual
Backgrounds are currently a solid translucent black.

Is it possible to hide any of the controls? I.e. I'm using the component on a full-screen video already, this makes the full-screen control redundant in this example..

can you please update the react native version of the module to 0.41.2

peer dep missing: [email protected], required by [email protected]

I am having a lot of issues getting the back function to work. I continue to get a undefined error. Is there a full implementation example somewhere? I would be interested to see exactly how the props should be passed in. I use the React Navigation in the rest of my app using the Stack Navigation, but am also unsure of how I can edit the _onBack function to use that instead of the native Navigator. Any help would be appreciated. Thanks! Below is my current Video (minus the init states)

Shouldn't hop back...should just stay where it needs to be...

Video plays automatically in Android without user interaction. playWhenInactive={ false } prop does not work in android. What should be the solution/work around?

Expected
Either truncate or marquee the label for the title.

Actual
Title pushes the timer off the page if it's too long.

With paused={false} video starts, but cannot be paused. With paused={true} video does not starts by pressing play button. react-native-video controls with controls={true} works fine with tested mp4 video.

Android 7.1.1. Simulator and real device

onEnd is triggered when seeking before onLoad is finished as we don't have the duration set.

Remove extraneous files.

Hi,
Firstly great work @itsnubix.
I am using the latest version of RN video controls and RN 0.46.4.
Using the component that u provide except some UI icons changes, but the video loads very very late.
A 20sec video takes almost 5 mins to load and play, and even then it doesn't play completely.
It stops(or may be buffering) after some seconds of playing. And sometimes resumes,and sometimes not.
(I have tried playing that video link on web it plays well)
Don't know why this issue.

Will be really very greatful if u can help and resolve the issue.
Please help.

Thank you

Expected
Volume icon should mask the background and the track bar for volume should not be visible through it.

Actual
Volume bar is currently visible through icon.

I have change the url to rtsp but it's not working.

If I use multiple instances of videoplayer using the map

this.state.videos.map(Video)

export const Video = (data) => {
...
}

then how to restrict only ONE video to play at a time?

I need a mute button and remove the volume control. Can't figure it out hot to create the mute button.
Has anyone done this? Thanks in advance.

I'm getting the following error "cannot read property 'Constants' of undefined"

Not sure what's wrong here is my code

{isVideo &&
                <VideoPlayer
                    source={{uri: 'https://s3-ap-southeast-2.amazonaws.com/ccapp-static-vidoes/' + selectedPhoto.filename}}
                />
                }

touch seekbar can't work, how to use it

Hi,

i'm considering this line:

If you're using RN < 39 run npm install --save [email protected]

but my version is exactly 0.39.

Expected
There is a 10s timer for controls when they are shown after tapping the screen. This should reset each time a control interface is interacted with

Actual
If you're mid-seek, adjusting volume or pressing any of the other buttons the timeout doesn't reset and will hide the buttons regardless of if you're interacting with them or not.

I am seeing the following warning:

Using with children is deprecated and will be an error in the near future. Please reconsider the layout or use instead.

Using:
"react": "16.0.0-beta.5",
"react-native": "0.49.3",
"react-native-video-controls": "^1.4.1"

Seekbar not show when i style for player container:

• specified height size.

I have implemented react-native-video-controls package which seems to be an extension of the react-native-video package. All props are working as expected except the poster prop. My implementation:

<View level={1}
            style={{ marginTop: 10, width: responsiveWidth(90), height: responsiveWidth(90) / (16 / 9), backgroundColor: '#fff' }}>
             
              <VideoPlayer
                source={{ uri: "https:videourl.com" }}   // Can be a URL or a local file.
                ref={(ref) => {
                  this.player = ref
                }}                                      // Store reference
                rate={1.0}                              // 0 is paused, 1 is normal.
                volume={1.0}                            // 0 is muted, 1 is normal.
                muted={false}                           // Mutes the audio entirely.
                paused={true}                          // Pauses playback entirely.
                resizeMode="contain"                      // Fill the whole screen at aspect ratio.*
                repeat={false}                           // Repeat forever.
                playInBackground={false}                // Audio continues to play when app entering background.
                playWhenInactive={false}                // [iOS] Video continues to play when control or notification center are shown.
                ignoreSilentSwitch={"ignore"}           // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
                progressUpdateInterval={250.0}          // [iOS] Interval to fire onProgress (default to ~250ms)
                onLoadStart={this.loadStart}            // Callback when video starts to load
                onLoad={this.setDuration}               // Callback when video loads
                onProgress={this.setTime}               // Callback every ~250ms with currentTime
                onEnd={this.onEnd}                      // Callback when playback finishes
                onError={this.videoError}               // Callback when video cannot be loaded
                onBuffer={this.onBuffer}                // Callback when remote video is buffering
                onTimedMetadata={this.onTimedMetadata}  // Callback when the stream receive some metadata
                controlTimeout={1000}     // hide controls after ms of inactivity. 
                navigator={navigator}      // prop from React Native <Navigator> component 
                seekColor={'#FFF'}         // fill/handle colour of the seekbar 
                poster={require('./images/xyz.png')}
              />


            </View>

Does this prop not supposed to work under the given circumstances? Is there an issue with react-native-video-controls package?

Currently if you click the control area while the menu is open it will close the menu...stop this.

OnLoad with BUG
Causes the Load icon to appear

The fullscreen button doesn't have any effect. Is this a known issue?

Expected
User is notified when a video fails to load

Actual
Component fails silently

I am having issues with the pause button, but only on iOS using the exact same code. It is a huge mystery to me. An example of the code is below (I have several videos). Do I need a prop for the toggle? Am I just lucky that it is working in android? or...is there something I need to do in the xcode project?

Thanks in advance!

<VideoPlayer source={{ uri: 'https://firebasestorage.googleapis.com/v0/b/...' }} style={styles.fullScreen} rate={this.state.rate} volume={this.state.volume} muted={this.state.muted} ignoreSilentSwitch={this.state.ignoreSilentSwitch} resizeMode={this.state.resizeMode} onLoad={this.onLoad} onBuffer={this.onBuffer} onProgress={this.onProgress} repeat={true} onBack={() => { navigate('Home'), this.state.paused = true}} />

a video with 60.095 duration shows 01:XX if the remaining time is > 30 seconds and 00:XX if remaining time is < 30 seconds

I used react-native-video-controls and I want to return seekbar to first when video ends. please help me

Error:
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.

Possible Fix:
componentWillUnmount needs to be updated remove listeners. Suspect the onLoad callback is firing if you navigate away too quickly.

Seeking doesn't work. Pressing once shows the controls, but the seek-bar is not responding to any of my touch gestures. Instead it only toggles the controls in / out.

start to load， call error ：

{
extra: -1004,
what: 1
}

I tried a fresh install but no luck.
I showed an err

My react-native version is 0.37.0
Can you please help?

I see there is an issue similar to this headed "...Android", I think that this is not specific to Android though so I have created a new issue, feel free to ask to migrate this over to the existing one.

Basically, the play/pause button does not function correctly if you initialise the VideoPlayer component with paused being true.

If you initialise the component with paused={true} then the video is indefinitely paused, i.e. pressing play does not play the video - the UI updates (play icon is swapped with pause), but the video itself remains in a paused state.

In short, the pretty much renders the paused prop... not very useful?

I have only tested this on IOS so far, will try test on Android before the week is out.

Further detail and some code snippets below.

IOS 10.3.2
Device: Iphone 5
React native: 0.47.2 (and 0.45).

Code snippets below to demo what I have found:

Example 1
If we intialize the component with paused={true}, then the play button does not work, you cannot use the controls to play the video, i.e. it is stuck in a "paused" state.

<VideoPlayer
        paused={true} //Video starts as paused, pressing the play button does not start the video
/>

Example 2

Initializing the component with paused={false} does in-fact result in the play/pause button working. Although, this is problematic if you do not want the video to play automatically.

<VideoPlayer
        paused={false} //Video starts playing, pressing the play button does play / pause the video
/>