当一个视频停止时，其他视频在本机视频中同时停止

Question

我已经开发了react-native cli，react-native-video（目前正在尝试expo-video）。

在一个屏幕中，有一个flatList，它有一个renderItem(column2)。在 renderItem 中呈现图像或视频缩略图。喜欢购物应用 UI AMAZON.

问题出在视频上。它会在用户向下滑动到 phone 的视图时自动停止。同时，在停止的视频下方，其他视频播放器将停止。该视频恰好位于用户 phone 视图的中间！

我该如何解决这个问题？

平面列表，


const [videoPlayback, setVideoPlayback] = useState(false);
 const viewabilityConfig = {
    itemVisiblePercentThreshold: 80,
  };

  const _onViewableItemsChanged = useCallback((props) => {
    const changed = props.changed;
    changed.forEach((item) => {
      if (item.item.vimeoId) {
        if (item.isViewable) {
          setVideoPlayback((prev) => true);
        } else {
          setVideoPlayback((prev) => false);
        }
      }
    });
  }, []);
...
      <FlatList
        ref={ref}
        numColumns={2}
        data={posts}
        keyExtractor={(item: any) => `${item.postId}`}
        viewabilityConfig={viewabilityConfig}
        onViewableItemsChanged={_onViewableItemsChanged}
        renderItem={({ item, index }) => (
          <PostContainer item={item} videoPlayback={videoPlayback} navigation={navigation} index={index} />
        )}

PostContainer

const PostContainer = ({ item, videoPlayback }) => {
  const videoPlayer = useRef(null);

  useFocusEffect(
    React.useCallback(() => {
      videoPlayer?.current?.seek(0);

      if (videoPlayer && !videoPlayback) {
        videoPlayer?.current?.seek(0);
      }
    }, [fadeAnim, videoPlayback]),
  );

  return (
    <View>

      { // This place that image component rendered}

      {item.vimeoId && (
        <StyledVideo
          ref={videoPlayer}
          paused={!videoPlayback}
          repeat={true}
          resizeMode={"cover"}
          volume={0}
          source={{
            uri: item.vimeoThumbnail,
          }}
        />
      )}
    </View>
  );
};

Answer 1

您列表中的所有视频共享相同的视频播放状态。如果您希望单独控制每个视频，请将您的 videoPlayback 状态逻辑移动到您的 PostContainer 中。

Answer 2

我解决了我的问题。我的逻辑没有错。重要的是'What videos are current playing?'

平面列表

  const _onViewableItemsChanged = useCallback(
    (props) => {
      const changed = props.changed;
      changed.forEach((item) => {
        if (item.item.vimeoId) {
          const tempId = item.item.vimeoId;

          if (item.isViewable) {
            if (readVideosVar.list.indexOf(tempId) === -1) {
              dispatch(postSlice.actions.addId(tempId));
            }
          } else {
            dispatch(postSlice.actions.deleteId(tempId));
          }
        }
      });
    },
    [dispatch],
  );

redux

    addId: (state, action) => {
      if (state.list.indexOf(action.payload) !== -1) {
        return;
      } else {
        let tempA = [];
        tempA.push(action.payload);
        state.list = state.list.concat(tempA);
      }
    },
    deleteId: (state, action) => {
      if (state.list.indexOf(action.payload) === -1) {
        return;
      } else {
        let stand = state.list;
        let findIdx = stand.indexOf(action.payload);
        let leftA = stand.slice(0, findIdx);
        let rightA = stand.slice(findIdx + 1);
        state.list = leftA.concat(rightA);
      }
    },

与现有代码相比，我添加了'redux-toolkit'。在调度逻辑中，“onViewalbeItems”实时跟踪了chagend可查看项目。

然后，我还补充说，

export const viewabilityConfig = {
  minimumViewTime: 1000,
  viewAreaCoveragePercentThreshold: 0,
};

这只是糖。

我是这样解决的！

当一个视频停止时，其他视频在本机视频中同时停止

When a video had stopped, other video stopped simultaneously in react native video

reactjs

react-native

react-native-video