Как я могу приостановить или остановить видео, когда я помещаю другое видео в стек с помощью видеопроигрывателя?

Question

Когда я использую this.props.navigation.push для стека навигации, мое видео продолжает воспроизводиться в фоновом режиме.Можно ли как-то приостановить или остановить видео, когда я ухожу?

<VideoPlayer
    videoProps={{
        shouldPlay: true,
        resizeMode: Video.RESIZE_MODE_CONTAIN,
        isMuted: false,
        source: {
            uri: this.props.navigation.state.params.video,
        },
    }}
    isPortrait
    playFromPositionMillis={0}
    showFullscreenButton
    switchToLandscape={() => 
        ScreenOrientation.allowAsync(ScreenOrientation.Orientation.LANDSCAPE)
    }
    switchToPortrait={() => 
        ScreenOrientation.allowAsync(ScreenOrientation.Orientation.PORTRAIT)
    }
/>

Дайте мне знать, если какие-либо дополнительные детали необходимы для уточнения.

Answer 1

Поскольку вы используете react-navigation, вы можете использовать прослушиватели событий жизненного цикла навигации.https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

Вы можете подписаться на четыре события:

• willFocus - экран будет сфокусирован
• didFocus - экрансфокусированный (если был переход, переход выполнен)
• willBlur - экран будет не сфокусированным
• didBlur - экран не сфокусирован (если был переход, переход выполнен)

Вы можете подписаться на любое их количество.Вот пример использования willBlur.Вы можете легко скопировать это для всего, что вам нужно.

componentDidMount () {
  // add listener 
  this.willBlurSubscription = this.props.navigation.addListener('willBlur', this.willBlurAction);
}

componentWillUmount () {
  // remove listener
  this.willBlurSubscription.remove();
}

willBlurAction = (payload) => {
  // do things here when the screen blurs
}

VideoPlayer Документы VideoPlayer не предоставляет те же функции ref, что Video Видео документы делает, но вы можете получить к ним, используя . _playbackInstance.Таким образом, вы можете сделать что-то вроде этого:

<VideoPlayer 
 ref={ref => {this.videoplayer = ref}}
 // other props
/>

Затем вы можете сделать что-то подобное в вашей didBlurAction функции

didBlurAction = (payload) => {
  if (this.videoplayer) {
    this.videoplayer._playbackInstance.pauseAsync();
  }
}

Я создал закуску, демонстрирующую ее работу.В перекусе вы можете переключаться между Video или VideoPlayer.Видео останавливается при переходе к следующему экрану.Есть также две кнопки, позволяющие вам pause или play видео.https://snack.expo.io/@andypandy/video-example