在轮播中反应本机视频
react native videos in carousel
我一直在尝试从包含多个视频和图像的滑块播放单个视频..
我使用和尝试的是在下面。
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 号为 1 的数据数组对象,ID 为 2 或 4 活动视频索引。
我只想实现与 Instagram post 一样的效果,没有性能滞后问题。
任何人都可以建议或帮助我实现这一目标。
下面是 magic 控制其他 feed 的 post 媒体滑块来暂停视频。
将以下两个道具添加到您的 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);
}
}
实现此目的的最佳方法是使用 inviewport
对于上面的回答 viewabilityConfig 和 onViewableItemsChanged
这些道具适用于平面列表,但不支持 react-native-snap-carousel 道具(viewabilityConfig 和 onViewableItemsChanged)
正如库的名称所暗示的那样,它可能只支持图像而不是视频,因为它会为循环渲染多次
我一直在尝试从包含多个视频和图像的滑块播放单个视频.. 我使用和尝试的是在下面。 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 号为 1 的数据数组对象,ID 为 2 或 4 活动视频索引。
我只想实现与 Instagram post 一样的效果,没有性能滞后问题。 任何人都可以建议或帮助我实现这一目标。
下面是 magic 控制其他 feed 的 post 媒体滑块来暂停视频。
将以下两个道具添加到您的 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);
}
}
实现此目的的最佳方法是使用 inviewport
对于上面的回答 viewabilityConfig 和 onViewableItemsChanged 这些道具适用于平面列表,但不支持 react-native-snap-carousel 道具(viewabilityConfig 和 onViewableItemsChanged)
正如库的名称所暗示的那样,它可能只支持图像而不是视频,因为它会为循环渲染多次