Seeker bar not show and the Video total time length display is not correct

[kylemilloy]

What version of RN, what version of react-native-video-controls and how long is the video?

[xiaomilii]

"react-native": "^0.39.2", "react-native-video-controls": "^1.1.1" video length of 8 minutes and 1 second ，first display correct ，but next second display 8 minutes and 59 second ...

[kylemilloy]

RE: Seekbar not showing. Are you adding custom styles to the player?

[xiaomilii]

no , my code: render() { return ( <VideoPlayer source={{ uri: 'http://200017106.vod.myqcloud.com/200017106_2c27afe6975a11e693e17f2b23195f06.f0.mp4' }} /> ); }

[kylemilloy]

Android?

[xiaomilii]

yes , on Samsung Galaxy s6 -6.0.0 - api 23

[Compulsed]

I can confirm that this is also happening on Android 6.0.0.

RN 0.42.0 RNV 1.0.0 RNVC 1.1.1

[kylemilloy]

1.1.1 was made for v39.2 of RN and 0.9 of RNV...if you update to 1.2 of RNVC do you still get issues? What's your test device?

[X-Tender]

I can confirm this issue with the RN Version 0.43.2. Also the Controls didn't disappear/appear on touch. :(

[ne0z]

edit the VideoPlayer.js and you just remove "flex: 1" on the stylesheet to show up the seekerbar const styles = { player: StyleSheet.create({ container: { flex: 1, <-- remove this alignSelf: 'stretch', justifyContent: 'space-between' },

[EwertonFontes]

I Have the same problem, the seekbar does not appears on screen and after few times video controls hide and does not appears too! I`m running on Android!

[smhatre59]

removing flex:1 from videoplayer.js stylesheet fixed the seekbar issue for me in android.
Thanks for the help @ne0z My package.json is as follows:

"react": "16.0.0-alpha.6", "react-native": "0.44.0", "react-native-video": "^1.0.0", "react-native-video-controls": "^1.2.0",

[Misiur]

Removing display flex worked, but I still don't see the seeker handle :( Could it be caused by playing m3u8 file instead of mp4?

[kylemilloy]

Not likely...I'd say it's because it's absolutely positioned...I'd guess when you remove flex it renders outside of the screen area.

[Gaia-Nutrition]

Same issue here:

• removed flex: 1 from the container
• seekbar is visible but handle is not

Has anyone found a fix yet?

[MEDLJosh]

I have been looking into this issue. I think it has to do with the fact that Android does not allow views to overflow. Messing around with the styles, I can get the seek bar handle to show up (but it is cut off by the parent views). Is anyone still working on this? A solution would be awesome!

[ThomasXu18]

Same issue. And removing display flex does not worked for me in android.

package.json: "react": "16.0.0-alpha.12", "react-native": "0.46.1", "react-native-video": "^1.0.0", "react-native-video-controls": "^1.3.0",

[nomikeeper]

If anyone is looking for a solution for seeker bar on Android. Use this to modify your VideoPlayer.js. It will fix your seeker bar for android. I've created a pull request, and it might take some time. If you are in hurry to fix it just modify the VideoPlayer.js according to the provided link.

[kylemilloy]

Thanks for the pull...this should be good

https://github.com/itsnubix/react-native-video-controls/pull/35

[Uysim]

I still meet this issue

[kylemilloy]

Can you tell me your version and show me your code? Are you using a .ts file?

[Uysim]

"react-native": "^0.45.1", "react-native-video-controls": "^1.2.0",

 <RNVideoPlayer
                source={{uri: this.state.videoUrl}}
                ref='video'
                // react-native-video options
                playInBackground={ false }   // play audio when entering background
                playWhenInactive={ false }   // [iOS] continuing playing when notification centre active
                // resizeMode={ 'cover' }     // 'contain' or 'cover' should be used.
                paused={ false }             // stop playback entirely
                repeat={ false }             // Repeats at end of duration
                muted={ false }              // Mutes the audio entirely.
                title={ '' }                 // Video title, if null title area is hidden
                volume={ 1 }                 // 0 is muted, 1 is normal.
                rate={ 1 }                   // 0 is paused, 1 is normal.
                // settings
                controlTimeout={ 15000 }     // hide controls after ms of inactivity.
                seekColor={ '#ED298A' }         // fill handle colour of the seekbar

                onError={this._handleError.bind(this)}         // Fired when an error is encountered on load
                onBack={this._backHandler.bind(this)}  // Function fired when back button is pressed.
                onEnd={ () => {this.handlePlayEnd()}}           // Fired when the video is complete.
            />

[kylemilloy]

Update the video controls package. You’re using a year old version that didn’t have this fix in it.

[Uysim]

@kylemilloy what version do you think I should use?

[kylemilloy]

Latest.