How do I pause a playing video (played with react-native-video) when user scrolls to another page in a viewpager (@react-native-community/viewpager)?

user_624202 0
Viewed 1885

In my app I am using a ViewPager (@react-native-community/viewpager) to display several pages. Some of these pages contain videos that I am displaying using react-native-video. If I start a video on one page and then scroll to the next page the video keeps playing in the background. The user can hear the audio of the video although the audio is not visible.

I would like to pause the video when the user scrolls to the next page, how do I accomplish that?

react-native-video react-native
2 Answers

You can store the current page value in state and set some indexes to your pages, like in example below. After that just check if your page is current page:

<ViewPager
  initialPage={0}
  onPageScroll={({ nativeEvent }) => {
    this.setState({
      activePage: nativeEvent.position
    })
  }
  }>
  <View key="1">
    <Video source={{ uri: '' }}
      paused={this.state.activePage !== 0} />
  </View>
  <View key="2">
    <Video source={{ uri: '' }}
      paused={this.state.activePage !== 1} />
  </View>
</ViewPager>

EDIT: If you do not need the video to auto-start, you can add isPlaying property in state, and set it to true when you need.

<ViewPager
  initialPage={0}
  onPageScroll={({ nativeEvent }) => {
    this.setState({
      activePage: nativeEvent.position,
      isPlaying: false
    })
  }
  }>
  <View key="1">
    <Video source={{ uri: '' }}
      paused={!this.state.isPlaying || this.state.activePage !== 0} />
  </View>
  <View key="2">
    <Video source={{ uri: '' }}
      paused={!this.state.isPlaying || this.state.activePage !== 1} />
  </View>
</ViewPager>
user_35442060

You can check index of ViewPage with index of VideoItem when you map data.

Example:

<ViewPager
      onPageSelected={this.onPageSelected}
      initialPage={currentVisibleIndex}
      style={{ width: '100%', height: '100%', justifyContent: 'center' }}
      key={data.length}
      // onPageScroll={this.onPageScroll}
      scrollEnabled={data && data.length > 1}
      // onPageScrollStateChanged={this.onPageScrollStateChanged}
    >
      {data.map((item, i) => {
        if (isVideo(item)) {
          return (
            <VideoItem
              uri={item}
              key={i.toString()}
              currentVisibleIndex={currentVisibleIndex}
              currentIndex={i}
            />
          );
        }
        return (
          <ImageItem
            uri={item}
            defaultSource={Images.defaultImageAlbum}
            key={i.toString()}
          />
        );
      })}
    </ViewPager>

And in VideoItem.js you can use this to paused video when you scroll viewpager.

  static getDerivedStateFromProps(props, state) {
let { paused } = state;

if (props.currentVisibleIndex !== props.currentIndex) {
  paused = true;
}
return {
  paused,
  currentVisibleIndex: props.currentVisibleIndex
};

}

Sorry about my English.

user_141941380
Related