реагировать на собственные видео в карусели - PullRequest
Новая
       80

реагировать на собственные видео в карусели

3 голосов
/ 19 июня 2020

Я пытался воспроизвести одно видео из слайдера, содержащего несколько видео и изображений. То, что я использовал и пробовал, показано ниже. 1. react-native-video, 2. react-native-snap-carousel

Как приостанавливать и воспроизводить видео, размещенные в горизонтальной карусели, а также в вертикальных фидах FlatList

Это моя карусель: 

<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>

И мой _renderItem здесь: 

if (item.mediaType === "image") {
return (
    <View style={[styles.sliderImgView, GlobalStyles.ajCenter]} key={index}>
        <Image source={{ uri: item.imgUrl }} resizeMode={"cover"} style={[styles.sliderImageStyle]} />
    </View>
)
} else {
    return (
        <View style={[styles.sliderImgView, GlobalStyles.ajCenter]} key={index}>
            <Video
                source={{ uri: item.imgUrl }}  // Can be a URL or a local file.
                ref={(ref) => { this.player = ref }}  // Store reference
                resizeMode={"cover"}
                paused={index !== this.state.activeSlide}
                onLoad={this.onVideoLoad}
                onError={this.onVideoError}
                controls={false}
                style={styles.backgroundVideo} />
        </View>
    )
}

И мой массив выглядит так: 

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"
        }
    ]
}
]

Я не хочу показывать управление плеером, поэтому я его скрываю ... как Instagram. Я не знаю, следует ли мне использовать этот или нет.

Настоящая проблема: я должен воспроизводить только видео, которое находится в видимой части глаз пользователя, которое находится в FlatList (я не упоминал свой код flatList, потому что это просто list_design). У меня был список прокрутки с несколькими объектами с мультимедийными данными в массивах. как я могу остановить воспроизведение объекта массива данных с идентификатором 1 с активным видеоиндексом с идентификатором 2 или 4, когда активен другой носитель с идентификатором 3.

enter image description here

Я просто хочу добиться того же, что и пост в Instagram, без проблем с производительностью. может ли кто-нибудь предложить или помочь мне достичь этого.

1 Ответ

1 голос
/ 20 июня 2020

Ниже был magi c, управляющий слайдерами постов других каналов для приостановки видео.

Добавьте два указанных ниже свойства в свой FlatList, чтобы получить текущий видимый индекс. И когда когда-либо текущее значение видимого индекса изменяет обновление в 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);
        }
    }
...