在轮播中反应原生视频 [英] react native videos in carousel

查看：58
本文介绍了在轮播中反应原生视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在尝试从包含多个视频和图像的滑块播放单个视频.我使用和尝试的内容如下.<强>1.react-native-video, 2. react-native-snap-carousel

如何暂停和播放水平轮播中包裹的视频以及垂直FlatList Feeds中的视频

这是我的旋转木马:

<旋转木马ref={(c) =>{ this._carousel = c;}}数据={chordData.images}第一项={0}自动播放={自动播放}布局={布局}循环={循环}renderItem={this._renderItem}onSnapToItem={(ind) =>this.setState({ activeSlide: ind })}loopClonesPerSide={bannersDataLength}滑块宽度={SCREEN_WIDTH}itemWidth={SCREEN_WIDTH}/></查看>

我的 _renderItem 在这里:

if (item.mediaType === "image") {返回 (<视图样式={[styles.sliderImgView, GlobalStyles.ajCenter]} key={index}><图片来源={{ uri: item.imgUrl }} resizeMode={"cover"} style={[styles.sliderImageStyle]}/></查看>)} 别的 {返回 (<视图样式={[styles.sliderImgView, GlobalStyles.ajCenter]} key={index}><视频source={{ uri: item.imgUrl }}//可以是 URL 也可以是本地文件.ref={(ref) =>{ this.player = ref }}//存储引用resizeMode="覆盖"}paused={index !== this.state.activeSlide}onLoad={this.onVideoLoad}onError={this.onVideoError}控制={假}style={styles.backgroundVideo}/></查看>)}

我的数组看起来像这样:

结果:[{编号:1，title: "Feed 标题",description: "Feed 描述....",数据: [{编号:1，媒体类型:图像"，imgUrl:https://images.unsplash.com/photo-1473177027534-53d906e9abcf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1"},{编号:2，媒体类型:视频"，imgUrl:http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"},{编号:3，媒体类型:图像"，imgUrl:https://images.unsplash.com/photo-1473177027534-53d906e9abcf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1"},{编号:4，媒体类型:视频"，imgUrl:http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"},]},{编号:2，title: "Feed 标题",description: "Feed 描述....",数据: [{编号:1，媒体类型:图像"，imgUrl: "https://images.unsplash.com/photo-1587269012604-b20cfbca7b16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=8"}]},{编号:3，title: "Feed 标题",description: "Feed 描述....",数据: [{编号:1，媒体类型:图像"，imgUrl:https://images.unsplash.com/photo-1473177027534-53d906e9abcf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1"},{编号:2，媒体类型:视频"，imgUrl:http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"},]},{编号:4，title: "Feed 标题",description: "Feed 描述....",数据: [{编号:1，媒体类型:图像"，imgUrl:https://images.unsplash.com/photo-1584679109597-c656b19974c9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop=80&w="}]}]

我不想显示播放器控件，这就是我隐藏它的原因..就像 Instagram 一样.我不知道我是否应该使用

我只想实现与 Instagram 帖子相同的效果，而不会出现性能滞后问题.任何人都可以建议或帮助我实现这一目标.

解决方案

下面做了魔术控制其他提要的帖子媒体滑块暂停视频.

将以下两个道具添加到您的 FlatList 以获取当前可见索引.并且当当前可见索引值更改时更新 componentDidUpdate 并调用您的 videoLoad 方法.

viewabilityConfig={{viewAreaCoveragePercentThreshold: 200}}onViewableItemsChanged={this.onViewableItemsChanged}onViewableItemsChanged = ({ viewableItems, changed }) =>{如果 (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("检查prevProps:" + prevProps.currentVisibleIndex + "---->检查pevState:" + prevState.currentVisibleIndex);}}

I have been trying to play single video from a slider containing of multiple videos and images.. What i used and tried is in below. 1. react-native-video, 2. react-native-snap-carousel

How to pause and play the videos wrapped in horizontal carousel and also which are in vertical FlatList Feeds

This is my carousel : 

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

And my _renderItem is here : 

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

And my Array look's like this :

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

I don't want to show the player control that's why i hide it.. just like Instagram. I don't know whether i should use this or not.

Present issue is: i should only play the video which is in visible section of user eyes which is in FlatList (i had't mention my flatList code as it is just list_design). i had scroll list with multiple objects with media data in arrays. how can i manage to stop playing id number 1 object of data array with id 2 or 4 active video index when other id number 3's media is in active.

I just want to achieve same as like Instagram post with no performance lagging issues. can anyone please suggest or help me to achieve this.

解决方案

Below did the magic controlling other feed's post media sliders to pause the video.

Add the below two props to your FlatList to get the current visible Index., and when ever the current visible index value changes update in componentDidUpdate and call your videoLoad method.

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);
        }
    }

这篇关于在轮播中反应原生视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆