reactjs - 在 FlatList 中播放/暂停/下载视频

Question

我正在尝试实现一个非常常见的用例。这个想法很简单，下载/播放当前在平面列表中显示的视频，暂停/不下载其余的。

这是我的 FeedCard -> MyFlatListItem

class FeedCard extends PureComponent {

    constructor(props){
        super(props);
        this.state = {
            pauseVideo: true
        };
    }

    playThisVieo = (playVideo) => {
      this.setState({
          pauseVideo: !playVideo
      });
    };

    render() {
        return (
            <Card>
                <CardItem cardBody>
                    <View style={styles.preview}>
                        <Video
                            source={{ uri: this.props.videoURL}}
                            ref={(ref) => {
                                this.player = ref;
                            }}
                            rate={1.0}
                            volume={1.0}
                            muted={false}
                            paused={this.state.pauseVideo}
                            resizeMode="stretch"
                            repeat={true}
                            playInBackground={false}
                            playWhenInactive={false}
                            ignoreSilentSwitch={"ignore"}
                            progressUpdateInterval={250.0}
                            onLoadStart={() => this.player.seek(0)}
                            onLoad={this.setDuration}
                            onProgress={this.setTime}
                            onEnd={this.onEnd}
                            onError={this.videoError}
                            onBuffer={this.onBuffer}
                            onTimedMetadata={this.onTimedMetadata}
                            style={{
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                bottom: 0,
                                right: 0,
                            }}
                        />
                    </View>
                </CardItem>
            </Card>
        );
    }
}

现在我所要做的就是在 FlatList 中渲染 ThisItem，然后在 onViewableItems 中，只播放正在显示的视频。

constructor(props){
    super(props);
    this.viewabilityConfig = {viewAreaCoveragePercentThreshold: 70};
}


 <FlatList
        horizontal={false}
        data={this.props.feeds}
        renderItem={this.renderFeeds}
        viewabilityConfig={this.viewabilityConfig}
        onViewableItemsChanged={this._onViewableItemsChanged}
 />

 renderFeeds = (feed) => {
    return (
        <FeedCard
            ref={(ref) => this.feedCardRef = {...this.feedCardRef, [`REF-FLATLIST${feed.item.feedID}`]: ref}} //Saving Refs Here
            videoURL={feed.item.videoURL}
            //Other Props
        />
    );
};

    _onViewableItemsChanged = (props) => {
        const changed = props.changed;
        const viewableItems = props.viewableItems;
        console.log(changed);
        console.log(viewableItems);
        changed.forEach(item => {
            if (!item.isViewable) {
                this.feedCardRef[`REF-FLATLIST${item.key}`].playThisVideo(item.isViewable);
            }
        });
        viewableItems.forEach(item => {
            if (item.isViewable) {
                this.feedCardRef[`REF-FLATLIST${item.key}`].playThisVideo(item.isViewable);
            }
        });
    };

现在，只有当屏幕上显示的是视频时，上面的内容才能很好地播放视频，但我也想仅当屏幕上正在显示该视频时才下载视频。如何控制视频的下载？我在 readme 中找不到任何内容.

Answer 1

播放可见的视频

constructor(props)
{
     super(props);
     this.videoRefs = [], 
}

<FeedCard
            ref={(videoRef) => {this.videoRefs[feed.item.feedID] = videoRef}; }
            videoURL={feed.item.videoURL}

        />

==============

_onViewableItemsChanged = (props) => {
        const changed = props.changed;
        const viewableItems = props.viewableItems;

        changed.forEach(item => {
            if (!item.isViewable) {
                 this.videoRefs[item.id].pauseVideo();
            }
        });
        viewableItems.forEach(item => {
            if (item.isViewable) {
                 this.videoRefs[item.id].playVideo();
            }
        });
    };