Реквизиты OnBuffer в react-native-video не работают - PullRequest
0 голосов
/ 29 мая 2020

Я использую response-native-video для воспроизведения видео с url-адреса. Я использую опору onBuffer, чтобы показать загрузчику, если видео буферизуется. Но в моем случае onBuffer не работает. Если размер видео большой, то в случае медленной или нестабильной сети видео требуется время для воспроизведения, поэтому я хочу показать загрузчик, если видео не воспроизводится, но находится в режиме буферизации.

Ответы [ 2 ]

0 голосов
/ 29 мая 2020

Я проделывал все это в своем приложении для состояния буферизации, вы можете просто проверить состояние в буфере и отобразить загрузчик вот так. Вы должны использовать комбинацию 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
  }
})
0 голосов
/ 29 мая 2020

Вы можете использовать onLoad и onEnd prop для response-native-video, чтобы показать загрузчик.

Например,

<Video
    poster={/*uri*/}
    posterResizeMode="cover"
    source={/*source*/}
    onLoad={()=>/* set loader to true*/}
    onEnd={()=>/* set loader to false*/}
  />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...