如何播放带有反应原生视频的视频并在平面列表中暂停其他视频

Question

我正在制作一个像 tiktok / instagram reel 这样的视频应用程序，我有一个如下的平面列表

我的所有视频都会自动播放，我已将其设置为在渲染时暂停（目前），我想在屏幕上看到视频并暂停其他视频时播放视频，但它没有工作我似乎无法在网上看到任何关于如何暂停其他视频或可能只渲染一个视频直到我滚动但无论我做什么所有视频都设置为 true 的内容。

如何让可见的视频播放，然后在用户滚动时暂停，然后播放其他可见视频？

我已经在这工作了 2 天，我的脑袋很炸，任何帮助将不胜感激:(

PostScreen.js

const [state, setState] = useState({
    isVisible: false,
})

const videoData [
 {
   id: 1,
   video: videourl
 },
 {
   id: 2,
   video: videourl
 },
];

const _onViewableItemsChanged = useCallback(({ viewableItems }) => {
    if(viewableItems[0]){
       if(viewableItems[0].isViewable){
         setState({...state, isVisible: true})
       }
    }

}, []);

const _viewabilityConfig = {
  itemVisiblePercentThreshold: 50
}


 <FlatList
    data={videosData}
    decelerationRate={'fast'}
    showsVerticalScrollIndicator={false}
    snapToInterval={Dimensions.get('window').height}
    snapToAlignment={"start"}
    initialScrollIndex={0}
    disableIntervalMomentum
    onViewableItemsChanged={_onViewableItemsChanged}
    viewabilityConfig={_viewabilityConfig}
    renderItem={ ({ item }) => (
       <View>
          <VideoPlayerComponent data={item} />
       </View>
    )}
 />

视频播放器组件

const [data] = useState(props.data)
const [paused, setPaused] = useState(true);

return(
  <View>
      <TouchableWithoutFeedback
          onPress={() => setPaused(!paused)}
      >
         <View>
             <Video
                style={styles.fullScreen}
                source={data.video}
                resizeMode="cover"
                paused={paused}
                repeat
              />
             {
                paused ? (
                   <View style={styles.pausedIcon}>
                      <Icon name="play" type="ionicon" color="white" size={68} />
                   </View>
                ): null
             }
         </View>
      </TouchableWithoutFeedback>
  </View>
)

Answer 1

朋友们，我已经解决了我的 react 原生视频项目的问题。 问题是所有视频都在 Flatlist 中播放，但我们只需要在当前视口上播放单个视频并暂停其余视频。 只需执行以下步骤即可解决所有视频播放问题

1：npm install @svanboxel/visibility-sensor-react-native

2：从“@svanboxel/visibility-sensor-react-native”导入 VisibilitySensor

3：这样做

import VisibilitySensor from '@svanboxel/visibility-sensor-react-native'
const video = ()=>{
const [paused, setpaused] = useState(true)
return(
     <VisibilitySensor onChange={(isVisible)=>{ 
        return(
          console.log(isVisible),
          isVisible?setpaused(false):setpaused(true)
        )  
      }
    }
    >
    <View>
     <Video
              source={{uri: 'https://d8vywknz0hvjw.cloudfront.net/fitenium-media-prod/videos/45fee890-a74f-11ea-8725-311975ea9616/proccessed_720.mp4'}}
              style={styles.video}
              onError={(e) => console.log(e)}
              resizeMode={'cover'}
              repeat={true}
              paused={paused}
            />
      </View>
    </VisibilitySensor>
)
}

4：我刚刚为您提供了基本结构，您可以根据需要添加样式。

5：请记住，始终在 VisibilitySensor 标签之间添加您的视图/视频元素，否则将不起作用。

6：当您的视频组件将在平面列表视口中呈现时，此代码将为您返回 true，而其余代码将为您返回 false。使用它您可以管理视频元素的播放/暂停状态。

谢谢...

Answer 2

我设法使用了inviewport library

使用这个snippiti 设法转换为功能类 在我的功能类中，我只是按原样传递了一个平面列表。

 <FlatList
   data={videos}
   decelerationRate={'fast'}
   showsVerticalScrollIndicator={false}
   snapToInterval={Dimensions.get('window').height}
   snapToAlignment={"start"}
   initialScrollIndex={0}
   disableIntervalMomentum
   renderItem={ ({ item }) => (
       <View>
          <VideoPlayerComponent data={item}/>
       </View>
   )}
 />

然后在我的 VideoPlayerComponent 中我这样做

const video = useRef(ref)

const playVideo = () => {
   if(video) {
      setPaused(false);
   }
}

const pauseVideo = () => {
  if(video) {
     setPaused(true);
  }
}

const handlePlaying = (isVisible) => {
   isVisible ? playVideo() : pauseVideo();
}

return (
   <View>
     <Video
        ref={ ref => {video.current = ref}}
        style={styles.fullScreen}
        source={data.video}
        paused={paused}
        resizeMode="cover"
        repeat
     />
   </View>

)

这将播放正在查看的视频，并根据传递给它的ref 暂停另一个。

希望这可以帮助任何人因为我被困了几天:)