当用户滚动到 viewpager (@react-native-community/viewpager) 中的另一个页面时,如何暂停播放视频(使用 react-native-video 播放)?
How do I pause a playing video (played with react-native-video) when user scrolls to another page in a viewpager (@react-native-community/viewpager)?
在我的应用程序中,我使用 ViewPager (@react-native-community/viewpager) 来显示多个页面。其中一些页面包含我使用 react-native-video 显示的视频。如果我在一页上开始播放视频,然后滚动到下一页,视频会一直在后台播放。虽然音频不可见,但用户可以听到视频的音频。
我想在用户滚动到下一页时暂停视频,我该如何实现?
您可以将当前页面值存储在状态中,并为您的页面设置一些索引,如下例所示。之后只需检查您的页面是否为当前页面:
<ViewPager
initialPage={0}
onPageScroll={({ nativeEvent }) => {
this.setState({
activePage: nativeEvent.position
})
}
}>
<View key="1">
<Video source={{ uri: '' }}
paused={this.state.activePage !== 0} />
</View>
<View key="2">
<Video source={{ uri: '' }}
paused={this.state.activePage !== 1} />
</View>
</ViewPager>
编辑:
如果不需要视频自启动,可以在state中添加isPlaying
属性,需要的时候设置为true
。
<ViewPager
initialPage={0}
onPageScroll={({ nativeEvent }) => {
this.setState({
activePage: nativeEvent.position,
isPlaying: false
})
}
}>
<View key="1">
<Video source={{ uri: '' }}
paused={!this.state.isPlaying || this.state.activePage !== 0} />
</View>
<View key="2">
<Video source={{ uri: '' }}
paused={!this.state.isPlaying || this.state.activePage !== 1} />
</View>
</ViewPager>
映射数据的时候可以查看ViewPage的index和VideoItem的index。
示例:
<ViewPager
onPageSelected={this.onPageSelected}
initialPage={currentVisibleIndex}
style={{ width: '100%', height: '100%', justifyContent: 'center' }}
key={data.length}
// onPageScroll={this.onPageScroll}
scrollEnabled={data && data.length > 1}
// onPageScrollStateChanged={this.onPageScrollStateChanged}
>
{data.map((item, i) => {
if (isVideo(item)) {
return (
<VideoItem
uri={item}
key={i.toString()}
currentVisibleIndex={currentVisibleIndex}
currentIndex={i}
/>
);
}
return (
<ImageItem
uri={item}
defaultSource={Images.defaultImageAlbum}
key={i.toString()}
/>
);
})}
</ViewPager>
并且在 VideoItem.js 中,您可以在滚动 viewpager 时使用它来暂停视频。
static getDerivedStateFromProps(props, state) {
let { paused } = state;
if (props.currentVisibleIndex !== props.currentIndex) {
paused = true;
}
return {
paused,
currentVisibleIndex: props.currentVisibleIndex
};
}
对不起我的英语。
在我的应用程序中,我使用 ViewPager (@react-native-community/viewpager) 来显示多个页面。其中一些页面包含我使用 react-native-video 显示的视频。如果我在一页上开始播放视频,然后滚动到下一页,视频会一直在后台播放。虽然音频不可见,但用户可以听到视频的音频。
我想在用户滚动到下一页时暂停视频,我该如何实现?
您可以将当前页面值存储在状态中,并为您的页面设置一些索引,如下例所示。之后只需检查您的页面是否为当前页面:
<ViewPager
initialPage={0}
onPageScroll={({ nativeEvent }) => {
this.setState({
activePage: nativeEvent.position
})
}
}>
<View key="1">
<Video source={{ uri: '' }}
paused={this.state.activePage !== 0} />
</View>
<View key="2">
<Video source={{ uri: '' }}
paused={this.state.activePage !== 1} />
</View>
</ViewPager>
编辑:
如果不需要视频自启动,可以在state中添加isPlaying
属性,需要的时候设置为true
。
<ViewPager
initialPage={0}
onPageScroll={({ nativeEvent }) => {
this.setState({
activePage: nativeEvent.position,
isPlaying: false
})
}
}>
<View key="1">
<Video source={{ uri: '' }}
paused={!this.state.isPlaying || this.state.activePage !== 0} />
</View>
<View key="2">
<Video source={{ uri: '' }}
paused={!this.state.isPlaying || this.state.activePage !== 1} />
</View>
</ViewPager>
映射数据的时候可以查看ViewPage的index和VideoItem的index。
示例:
<ViewPager
onPageSelected={this.onPageSelected}
initialPage={currentVisibleIndex}
style={{ width: '100%', height: '100%', justifyContent: 'center' }}
key={data.length}
// onPageScroll={this.onPageScroll}
scrollEnabled={data && data.length > 1}
// onPageScrollStateChanged={this.onPageScrollStateChanged}
>
{data.map((item, i) => {
if (isVideo(item)) {
return (
<VideoItem
uri={item}
key={i.toString()}
currentVisibleIndex={currentVisibleIndex}
currentIndex={i}
/>
);
}
return (
<ImageItem
uri={item}
defaultSource={Images.defaultImageAlbum}
key={i.toString()}
/>
);
})}
</ViewPager>
并且在 VideoItem.js 中,您可以在滚动 viewpager 时使用它来暂停视频。
static getDerivedStateFromProps(props, state) {
let { paused } = state;
if (props.currentVisibleIndex !== props.currentIndex) {
paused = true;
}
return {
paused,
currentVisibleIndex: props.currentVisibleIndex
};
}
对不起我的英语。