我想实现一个很常见的用例。这个想法很简单,下载/播放了当前正在显示在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什么。
播放视频时可见
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();
}
});
};