4

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?

Robban
  • 1,191
  • 2
  • 13
  • 25

2 Answers2

3

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>
Vadim Goroshevsky
  • 1,486
  • 10
  • 19
  • 1
    One sideeffect of this is that the video automatically starts playing when the page is visible. – Robban Jul 29 '20 at 09:32
0

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.

anhnd
  • 1