Javascript 在旋转木马中反应本地视频

我一直在尝试从包含多个视频和图像的滑块播放单个视频。。 下面是我使用和尝试的内容。 1。反应本地视频，2。react本机快照转盘

如何暂停和播放水平旋转木马中包装的视频以及垂直扁平列表提要中的视频

这是我的旋转木马：

<View style={styles.sliderImgView}>
     <Carousel
       ref={(c) => { this._carousel = c; }}
       data={chordData.images}
       firstItem={0}
       autoplay={autoPlay}
       layout={layout}
       loop={loop}
       renderItem={this._renderItem}
       onSnapToItem={(ind) => this.setState({ activeSlide: ind })}
       loopClonesPerSide={bannersDataLength}
       sliderWidth={SCREEN_WIDTH}
       itemWidth={SCREEN_WIDTH} />
</View>

我不想显示玩家的控制，这就是为什么我隐藏它。。就像Instagram一样。 我不知道我是否应该使用

目前的问题是：我应该只播放在FlatList中用户眼睛可见部分的视频（我没有提到我的FlatList代码，因为它只是列表设计）。我有一个滚动列表，其中包含多个阵列中包含媒体数据的对象。当其他id 3的媒体处于活动状态时，如何停止播放id为2或4的活动视频索引的数据阵列中id为1的对象

我只想实现与Instagram post一样的效果，而不存在性能滞后的问题。

---

任何人都可以建议或帮助我实现这一点。

下面的魔术控制其他提要的post media滑块来暂停视频

将以下两个道具添加到平面列表中，以获取当前可见索引。当当前可见索引值发生更改时，在componentDidUpdate中更新并调用videoLoad方法

viewabilityConfig={{viewAreaCoveragePercentThreshold: 200}}
onViewableItemsChanged={this.onViewableItemsChanged}

onViewableItemsChanged = ({ viewableItems, changed }) => {
   if (viewableItems && viewableItems.length > 0) {
        this.setState({ currentVisibleIndex: viewableItems[0].index });
   }
}

componentDidUpdate(prevProps, prevState){
   if (prevProps.currentVisibleIndex !== this.props.currentVisibleIndex) {
         this.setState({ currentVisibleIndex: this.props.currentVisibleIndex }, () => {
            this.onVideoLoad();
         })
         //console.log("Check prevProps: " + prevProps.currentVisibleIndex + "----> Check pevState: " + prevState.currentVisibleIndex);
        }
    }

---

实现这一点的最佳方法是使用inviewport

请粘贴完整的代码片段，我也在尝试实现几乎相同的功能。非常感谢，请帮助我基本上，我想在这个例子中这样做，但使用视频而不是imageView端口，基本上定义了在滚动过程中特定时刻可以看到的屏幕区域，以便实现您正在尝试的操作，最好的方法是使用或创建具有视口感知功能的组件，这样您可以根据组件的可见性播放或暂停视频。看零食

result: [
{
    id: 1,
    title: "Feed Title",
    description: "Feed description....",
    data: [
        {
            id: 1,
            mediaType: "image",
            imgUrl: "https://images.unsplash.com/photo-1473177027534-53d906e9abcf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80"
        },
        {
            id: 2,
            mediaType: "video",
            imgUrl: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        },
        {
            id: 3,
            mediaType: "image",
            imgUrl: "https://images.unsplash.com/photo-1473177027534-53d906e9abcf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80"
        },
        {
            id: 4,
            mediaType: "video",
            imgUrl: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        },
    ]
},
{
    id: 2,
    title: "Feed Title",
    description: "Feed description....",
    data: [
        {
            id: 1,
            mediaType: "image",
            imgUrl: "https://images.unsplash.com/photo-1587269012604-b20cfbca7b16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=849&q=80"
        }
    ]
},
{
    id: 3,
    title: "Feed Title",
    description: "Feed description....",
    data: [
        {
            id: 1,
            mediaType: "image",
            imgUrl: "https://images.unsplash.com/photo-1473177027534-53d906e9abcf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80"
        },
        {
            id: 2,
            mediaType: "video",
            imgUrl: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        },

    ]
},
{
    id: 4,
    title: "Feed Title",
    description: "Feed description....",
    data: [
        {
            id: 1,
            mediaType: "image",
            imgUrl: "https://images.unsplash.com/photo-1584679109597-c656b19974c9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
        }
    ]
}
]

viewabilityConfig={{viewAreaCoveragePercentThreshold: 200}}
onViewableItemsChanged={this.onViewableItemsChanged}

onViewableItemsChanged = ({ viewableItems, changed }) => {
   if (viewableItems && viewableItems.length > 0) {
        this.setState({ currentVisibleIndex: viewableItems[0].index });
   }
}

componentDidUpdate(prevProps, prevState){
   if (prevProps.currentVisibleIndex !== this.props.currentVisibleIndex) {
         this.setState({ currentVisibleIndex: this.props.currentVisibleIndex }, () => {
            this.onVideoLoad();
         })
         //console.log("Check prevProps: " + prevProps.currentVisibleIndex + "----> Check pevState: " + prevState.currentVisibleIndex);
        }
    }