当我使用 expo 视频播放器将另一个视频推送到堆栈时，如何暂停或停止视频? [英] 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 docs 不公开相同的 ref 功能 Video Video docs 可以，但您可以使用 找到它们._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 之间切换.当您导航到下一个屏幕时，视频会暂停.还有两个按钮可让您暂停或播放视频.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 视频播放器将另一个视频推送到堆栈时，如何暂停或停止视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！