使用Expo Video播放器将另一个视频推入堆栈时，如何暂停或停止视频? [英] How can i pause or stop a video when i push another video onto the stack using expo video player?

问题描述

当我在导航堆栈上使用this.props.navigation.push时，我的视频将继续在后台播放.当我离开时，是否可以暂停或停止视频?

When I use this.props.navigation.push onto the navigation stack, my video continues to play in the background. Is there a way I can pause or stop the video as I navigate away?

<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)
    }
/>

让我知道是否需要进一步详细说明.

Let me know if any further details are needed to clarify.

推荐答案

在使用react-navigation时，可以在导航生命周期事件上使用侦听器. https://reactnavigation. org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

As you are using react-navigation you can use listeners on the navigation lifecycle events. https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

您可以订阅四个事件:

• willFocus-屏幕将聚焦
• didFocus-屏幕聚焦(如果存在过渡，则过渡完成)
• willBlur-屏幕将无法对焦
• didBlur-屏幕未聚焦(如果存在过渡，则过渡完成)

• willFocus - the screen will focus
• didFocus - the screen focused (if there was a transition, the transition completed)
• willBlur - the screen will be unfocused
• didBlur - the screen unfocused (if there was a transition, the transition completed)

您可以根据需要订阅任意数量的内容.这是使用willBlur的示例.您可以轻松地将其复制为所需的全部内容.

You can subscribe to as many of them as you want. Here is an example of using willBlur. You could easily replicate this for all that you require.

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文档没有公开与Video相同的ref函数视频文档可以，但是您可以使用. _playbackInstance来找到它们.因此，您可以执行以下操作:

VideoPlayer VideoPlayer docs does not expose the same ref functions that Video Video docs does, but you can get to them by using . _playbackInstance. So you could do something like this:

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

然后您可以在didBlurAction函数中执行类似的操作

Then you could do something like this in your didBlurAction function

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

我制作了一种小吃，证明它能正常工作.在小吃中，您可以在使用Video或VideoPlayer之间进行切换.当您导航到下一个屏幕时，视频暂停.还有两个按钮允许您pause或play视频. https://snack.expo.io/@andypandy/video-example

I have created a snack demonstrating it working. In the snack you are able to toggle between using Video or VideoPlayer. The video pauses when you navigate to the next screen. There are also two buttons allowing you to pause or play the video. https://snack.expo.io/@andypandy/video-example

这篇关于使用Expo Video播放器将另一个视频推入堆栈时，如何暂停或停止视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！