我一直在尝试从包含多个视频和图像的滑块播放单个视频。我使用和尝试的内容如下。 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>
Run Code Online (Sandbox Code Playgroud)
我的 _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 …Run Code Online (Sandbox Code Playgroud) javascript react-native react-native-snap-carousel react-native-video
我在swiper中有多个视频可以一个一个地显示视频,但是所有视频都是同时加载和播放的,而且音频很乱,我希望当前视频只能一次播放。
import * as React from 'react';
import { Text, View, StyleSheet,Image, Dimensions } from 'react-native';
import { Constants } from 'expo';
import { Video } from 'expo';
import Swiper from './Swiper';
import InViewPort from './InViewport';
const screenWidth = Dimensions.get('window').width ;
const screenHeight = Dimensions.get('window').height;
export default class App extends React.Component {
constructor(props) {
super(props);
// Your source data
this.state = {
images: {},
muted : false,
paused: true,
};
this.player = Array();
this.onChangeImage = this.onChangeImage.bind(this);
}
videoError(err){
console.warn(err);
} …Run Code Online (Sandbox Code Playgroud)