在轮播中反应原生视频

Posted

技术标签:

【中文标题】在轮播中反应原生视频【英文标题】:react native videos in carousel 【发布时间】:2020-06-19 11:00:30 【问题描述】:

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

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

这是我的轮播:

<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 一样。 我不知道我是否应该使用this。

目前的问题是:我应该只播放 FlatList 中用户眼睛可见部分的视频(我没有提到我的 flatList 代码,因为它只是 list_design)。我有多个对象的滚动列表,其中包含数组中的媒体数据。当其他 id 编号为 3 的媒体处于活动状态时,我如何设法停止播放 id 为 2 或 4 活动视频索引的数据数组的编号为 1 的对象。

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

【问题讨论】:

【参考方案1】:

下面是魔术控制其他供稿的发布媒体滑块以暂停视频。

将以下两个道具添加到您的 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);
        
    

【讨论】:

能否请您粘贴完整的代码 sn-p,我也在尝试实现几乎相同的功能。不胜感激,请帮助我 基本上,我想在这个例子中喜欢这个snack.expo.io/@xeteke8423/privileged-pizza,但使用视频而不是图像【参考方案2】:

实现这一目标的最佳方法是使用 inviewport

【讨论】:

视口基本上定义了在滚动期间特定时刻可见的屏幕区域,因此要实现您想要做的事情,最好的方法是使用或创建一个组件是视口感知的,这样您就可以根据组件的可见性播放或暂停视频。看点心snack.expo.io/6rX_nhFyp【参考方案3】:

对于上述答案 viewabilityConfig 和 onViewableItemsChanged 这些道具适用于平面列表,但不支持 react-native-snap-carousel 道具(viewabilityConfig 和 onViewableItemsChanged)

正如库的名称所暗示的,它可能只支持图像而不是视频,因为它会多次循环渲染

【讨论】:

以上是关于在轮播中反应原生视频的主要内容,如果未能解决你的问题,请参考以下文章

根据用户在轮播中的位置查找猫头鹰轮播的索引

sencha touch 2 在轮播中滑动到下一张卡片时停止音频?

如何在轮播中使横向和纵向图像完全响应且高度相同?

Rails 应用程序中的引导轮播,显示所有图像,不显示缩略图。在轮播中显示数据库中的图像

禁用轮播中的拖动

单击下一个/上一个图像时,将滑块移动到反应光滑的轮播中