Я проделывал все это в своем приложении для состояния буферизации, вы можете просто проверить состояние в буфере и отобразить загрузчик вот так. Вы должны использовать комбинацию onLoadStart, onBuffer and onLoadEnd
. Ниже приведен пример того, как вы также можете создать свой собственный загрузчик и отображать его во время буферизации. Если вы не хотите использовать мой загрузчик или эту анимацию, удалите эту штуку и сделайте свой собственный загрузчик.
class VideoPlayer extends React.Component {
constructor (props) {
super(props)
this.state = {
paused: false,
buffering: true,
animated: new Animated.Value(0),
progress: 0,
duration: 0
}
}
handleMainButtonTouch = () => {
if (this.state.progress >= 1) {
this.player.seek(0)
}
this.setState(state => {
return {
paused: !state.paused
}
})
};
handleProgressPress = e => {
const position = e.nativeEvent.locationX
const progress = (position / 250) * this.state.duration
const isPlaying = !this.state.paused
this.player.seek(progress)
};
handleProgress = progress => {
this.setState({
progress: progress.currentTime / this.state.duration
})
};
onBuffer = ({isBuffering}) => {
this.setState({ buffering: isBuffering })
if (isBuffering) {
this.triggerBufferAnimation()
}
if (this.loopingAnimation && isBuffering) {
this.loopingAnimation.stopAnimation()
}
}
onLoadStart = () => {
this.triggerBufferAnimation()
}
handleLoad = ({duration}) => {
this.setState({
duration: duration
})
};
triggerBufferAnimation = () => {
this.loopingAnimation && this.loopingAnimation.stopAnimation()
this.loopingAnimation = Animated.loop(
Animated.timing(this.state.animated, {
toValue: 1,
duration: 1500
})
).start()
};
render () {
console.log('video player ', this.props)
const { isShowingDetails, hideDetails, showDetails, thumbnailUrl, url } = this.props
const { buffering } = this.state
const BufferInterpolation = this.state.animated.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '600deg']
})
const rotateStyles = { transform: [{
rotate: BufferInterpolation
}]
}
return (
<React.Fragment>
<Video
ref={ref => {
this.player = ref;
}}
source={{ uri: url }}
controls
paused={this.state.paused}
// poster={thumbnailUrl}
onBuffer={this.onBuffer}
onLoadStart={this.onLoadStart}
onLoad={this.handleLoad}
key={url}
onProgress={this.handleProgress}
style={styles.backgroundVideo}
useTextureView={false}
onVideoEnd={() => alert('Video ended')}
bufferConfig={{
minBufferMs: 15000,
maxBufferMs: 50000,
bufferForPlaybackMs: 2500,
bufferForPlaybackAfterRebufferMs: 5000
}}
/>
<View
color={Colors.appColor}
style={styles.videoCover}
>{
buffering && <Animated.View style={rotateStyles}>
<FontAwesome5 name='circle-notch' size={50} color='rgba(255, 255, 255, 0.6)' />
</Animated.View>
}</View>
</React.Fragment>
)
}
}
export default VideoPlayer
const styles = StyleSheet.create({
backgroundVideo: {
height: undefined,
width: '100%',
backgroundColor: 'black',
aspectRatio: 16 / 9,
zIndex: 100
// 2: 0
},
videoCover: {
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'transparent',
zIndex: 10
},
controls: {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
height: 20,
left: 0,
bottom: 5,
right: 0,
position: 'absolute',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
paddingHorizontal: 10,
zIndex: 10
},
duration: {
color: '#FFF',
marginLeft: 15
}
})