How to pause and play video when display

Question

I am trying to pause and play video using scrollView but i am unable to do that I wrote a code but it have some condition issue, can anybody please tell me what is wrong in my code, I want to play the video when it is visible and pause all other videos in the list than when we scroll the video show on screen it start playing automatically and the previous video pause or stops automatically.

handleVideoLayout = (e:any) => {
  const {height} = Dimensions.get("window");
  console.log(e.nativeEvent.layout.y,e.nativeEvent.layout.height);
  
  this.position.start = -(e.nativeEvent.layout.y - height + 100);
  this.position.end = e.nativeEvent.layout.y + e.nativeEvent.layout.height  + 100;
 }

handleScroll = (e:any) => {
  const scrollPosition = e.nativeEvent.contentOffset.y;
  const paused = this.state.paused;
  const {start,end} = this.position;
  console.log("========================================");
  console.log(start,end,scrollPosition);
  console.log("========================================");
if(scrollPosition > start && scrollPosition < end && paused){
    this.setState({paused:false});
  } else if((scrollPosition > end || scrollPosition < start) && !paused){
    this.setState({paused:true});
  }

My render function:

<ScrollView 
      onScroll={(event) => {
        this.handleScroll(event)
      }}
      onLayout={this.handleVideoLayout}
      >
{data.map((item,index)=> {
      return (
        <VideoComponent/>
      )
    })}
    </ScrollView>

score 0 · Answer 1 · answered Aug 04 '22 at 12:59

I don’t have idea about doing this using scroll view but you have an option in flatlist. In that, you will get the visible items on the screen. and then based on your requirements you can apply conditions.

see my below boilerplate.

const onViewableItemsChanged = ({viewableItems, changed}) => {
//here 'viewableItems' is an item that is currently visible on screen.
};

const viewabilityConfigCallbackPairs = useRef([{onViewableItemsChanged}]);


  <FlatList
      data={data}
      renderItem={renderPost}
      showsVerticalScrollIndicator={false}
      viewabilityConfigCallbackPairs={
        viewabilityConfigCallbackPairs.current
      }
    />

I was using this before but that doesn't work smoothly, Video waits few seconds and in the function it check all the items and then find the displayed video. The user experience was not smooth. — Bilal Yaqoob, Aug 04 '22 at 13:23

Shahmir Ali · Answer 2 · 2022-11-01T12:24:25.463

find the current index of your list and also the total index's of your list and then put like this

` const [paused, setPaused] = useState(false);

<Video videoRef={videoRef}

      source={{uri: userData?.Video?.path}}
      poster={VideoToImageUrlCoverter(userData?.Video?.path)}
      posterResizeMode={'cover'}
      pauseOnPress={paused}
      shouldPlay={currentIndex === index}
      repeat={true}
      autoplay
      resizeMode="cover"
      paused={
        currentIndex == index
          ? paused
          : !paused && currentIndex == index
          ? false
          : true
      }
    />

`

How to pause and play video when display

2 Answers2