播放/暂停/下载视频在FlatList

问题描述 投票:3回答:1

我想实现一个很常见的用例。这个想法很简单,下载/播放了当前正在显示在flatlist视频,暂停/不下载的休息。

这是我的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>
        );
    }
}

现在我要做的就是renderThisItem在FlatList然后在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什么。

reactjs video react-native react-native-flatlist
1个回答
0
投票

播放视频时可见

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();
            }
        });
    };
© www.soinside.com 2019 - 2024. All rights reserved.