itsnubix / react-native-video-controls Goto Github PK
View Code? Open in Web Editor NEWA React Native video component with controls
License: MIT License
A React Native video component with controls
License: MIT License
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?
Everything work ok but seekbar didn't show on bottom controls.
peer dep missing: [email protected], required by [email protected]
Shouldn't hop back...should just stay where it needs to be...
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?
Currently if you click the control area while the menu is open it will close the menu...stop this.
Seekbar not show when i style for player container:
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.
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 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"
react-native-video-controls/VideoPlayer.js
Line 817 in ae31712
react-native-video-controls/VideoPlayer.js
Line 906 in ae31712
OnLoad with BUG
Causes the Load icon to appear
Expected
User is notified when a video fails to load
Actual
Component fails silently
The fullscreen button doesn't have any effect. Is this a known issue?
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?
onEnd is triggered when seeking before onLoad is finished as we don't have the duration set.
Expected
The background of the top/bottom control bars should be subtle gradients
Actual
Backgrounds are currently a solid translucent black.
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 used react-native-video-controls and I want to return seekbar to first when video ends. please help me
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}} />
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.
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..
I am using react-native-video-controls. How to make video to full screen of device?
Expected
Either truncate or marquee the label for the title.
Actual
Title pushes the timer off the page if it's too long.
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
Volume keys and progress bars are hard to drag
I have change the url to rtsp but it's not working.
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/
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}}
/>
}
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.
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.
Please help, audio is not working on iPhone but works on emulator.
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
can you please update the react native version of the module to 0.41.2
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)
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..
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
touch seekbar can't work, how to use it
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.
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
Video plays automatically in Android without user interaction. playWhenInactive={ false }
prop does not work in android. What should be the solution/work around?
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
/>
is this support for react native 0.49? i try this, but video cant load.
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
.
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.
start to load, call error :
{
extra: -1004,
what: 1
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.