在轮播中反应原生视频
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 在轮播中滑动到下一张卡片时停止音频?