问题
i am making a Android video gallery app like YouTube using React-Native for that i am using 'react-native-video' package While using it all videos are playing at a time in the background but i want to play the particular video only when the user viewing it, And i want to set the video starting time to 2 seconds . Please tell me if anyone know how to do it by using react-native-video package ,
And tell if there is any better option other thank this Once check my below code
import React, { Component } from 'react'
import {
AppRegistry, Image, Platform, StyleSheet, Text, View, TextInput, Button, TouchableHighlight, Alert,
TouchableOpacity, ScrollView, ColorPropType, FlatList, SectionList, Dimensions,
Keyboard, Modal, NativeModules, SafeAreaView, StatusBar,
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import Icon from 'react-native-vector-icons/FontAwesome';
import Video from 'react-native-video';
import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';
import axios from 'axios';
import ProfilePostsSwiper from '../presentation/ProfilePostsSwiper';
import GlobalStore from '../GlobalStore';
const API_URL = GlobalStore.BASE_URL;
const DEVICE_WIDTH = Dimensions.get("window").width;
const DEVICE_HEIGHT = Dimensions.get("window").height;
var USER_ID = 'userID';
export default class ProfilePostsScreen extends Component {
constructor(Props) {
super(Props);
this.state = {
error: null,
userId: '',
post_id: '',
user_Posts: [],
dataProfilePosts: [],
paused: true,
playing: false,
};
}
async componentDidMount() {
this.get_Id();
var setIntervalId = setInterval(() => {
// console.log('Following List Screen: _id :=>', this.state.user_id);
this.setState({ user_Posts: this.props.navigation.getParam('myparam') })
}, 200);
setTimeout(() => clearInterval(setIntervalId), 600);
}
try {
const userId = await AsyncStorage.getItem('USER_ID') // (STORAGE_KEY)
if (userId !== '') {
this.setState({ userId })
console.log('Profile Posts get_id id: =>', userId)
// this.getUserPostsFiles()
} else {
console.log('Profile Posts get_id id: => user_id=null')
Alert.alert('No user_id found LogIn Now ' + this.props.navigation.navigate('LogIn'))
}
} catch (error) {
alert('Failed to load Profile Posts get_Id() user_id.')
}
}
render() {
const { user_Posts } = this.state
return (
<View style={styles.container}>
<View style={styles.tabContent}>
{this.state.userId != null ?
<FlatList style={styles.list}
data={this.state.user_Posts}
keyExtractor={(data_Posts, index) => {
return data_Posts.id.toString();
}}
ItemSeparatorComponent={() => {
return (<View style={styles.separator} />)
}}
renderItem={(posts, id) => {
const items = posts.item;
return (
<View style={styles.card}>
<View style={styles.cardHeader}>
<View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('UsersProfile', { myparam: items.user_id })} >
<Image style={styles.cardProfilePic} source={{ uri: "http://192.168.1.2:3200/" + items.picture_url }} />
</TouchableOpacity>
<TouchableOpacity onPress={() => this.props.navigation.navigate('UsersProfile', { myparam: items.user_id })} >
<Text style={styles.title}>{items.name}-{items.user_id}</Text>
</TouchableOpacity>
<Text style={styles.title}>{items.description}</Text>
</View>
</View>
<View style={styles.cardContent}>
{items.file_Name.toString().endsWith("mp4") ?
<View>
<Video
resizeMode="cover"
onEnd={this.onEnd}
onLoad={this.onLoad} paused=this.state.paused} onProgress={this.onProgress}
source={{ uri: "http://192.168.1.2:3200/" + items.file_Name }}
style={{ width: '100%', height: '100%', top: 0, left: 0, bottom: 0, right: 0, }}
/>
</View>
:
<ProfilePostsSwiper dataProfilePosts={items.file_Name} />
}
</View>
<View style={styles.cardFooter}>
<View style={styles.socialBarContainer}>
<View style={styles.socialBarSection}>
<TouchableOpacity style={styles.socialBarButton}>
<Icon name="thumbs-o-up" size={30} color="#900" />
</TouchableOpacity>
<Text style={styles.socialCount}>588</Text>
</View>
<View style={styles.socialBarSection}>
<TouchableOpacity style={styles.socialBarButton}>
<Icon name="thumbs-o-down" size={30} color="#ffffff" />
</TouchableOpacity>
<Text style={styles.socialCount}>78</Text>
</View>
<View style={styles.socialBarSection}>
<TouchableOpacity style={styles.socialBarButton}>
<Icon name="save" size={30} color="#ffffff" />
</TouchableOpacity>
<Text style={styles.socialCount}>25</Text>
</View>
<View style={styles.socialBarSection}>
<TouchableOpacity style={styles.socialBarButton}>
<Icon name="share" size={30} color="#ffffff" />
</TouchableOpacity>
<Text fontSize="40" style={styles.socialCount} > 13 </Text>
</View>
</View>
</View>
</View>
)
}}
/>
:
<View style={styles.ifContainer}>
<TouchableOpacity style={[styles.buttonContainer, styles.greenButton]} onPress={() => this.props.navigation.navigate('LogIn')}>
<Text style={styles.buttonText}>LogIn</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.buttonContainer, styles.blueButton]} onPress={() => this.props.navigation.navigate('Register')}>
<Text style={styles.buttonText}>Register</Text>
</TouchableOpacity>
</View>
}
</View>
{/* )
} */}
{/* </View> */}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: DEVICE_WIDTH,
height: DEVICE_HEIGHT,
},
list: {
// paddingHorizontal: 1,
backgroundColor: "#E6E6E6",
},
separator: {
marginTop: 2,
// marginHorizontal: -10,
// alignSelf: 'stretch',
// borderTopWidth: 1,
// borderTopColor: '#888888',
// marginTop: 24,
},
/******* Segment */
tabContent: {
color: '#444444',
fontSize: 28,
margin: 0,
paddingTop: 0,
position: 'relative',
width: DEVICE_WIDTH,
// flex: 1,
zIndex: 1,
},
tabStyle: {
borderColor: '#D52C43',
},
activeTabStyle: {
backgroundColor: '#D52C43',
},
/******** card **************/
card: {
// flex: 1,
// width: DEVICE_WIDTH,
height: 680,
// margin: 2,
borderRadius: 2,
borderColor: 'black',
borderWidth: 1,
zIndex: 1,
shadowColor: '#00000021',
// shadowOffset: {
// width: 2
// },
shadowOpacity: 0.5,
// shadowRadius: 4,
// marginVertical: 20,
marginBottom: 50,
paddingBottom: 40,
backgroundColor: "transparent"
},
cardHeader: {
zIndex: 3,
height: 'auto',
position: 'absolute',
// color: '#00a63f',
// paddingVertical: 17,
// paddingHorizontal: 16,
// borderTopLeftRadius: 1,
// borderTopRightRadius: 1,
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: "transparent",
},
cardContent: {
backgroundColor: "transparent",
zIndex: 1,
// paddingVertical: 12.5,
// paddingHorizontal: 16,
// height: '100%',
// borderRadius: 2,
// borderColor: 'red',
// borderWidth: 4,
},
cardProfilePic: {
//flex: 1,
height: 100,
width: 100,
borderRadius: 10,
margin: 2,
backgroundColor: '#e8e9ee'
},
// cardImage: {
// // flex: 1,
// // height: '100%',
// width: '100%',
// borderRadius: 2,
// borderColor: 'red',
// borderWidth: 0,
// },
cardFooter: {
zIndex: 2,
position: 'relative',
// color: '#00a63f',
backgroundColor: 'black',
flexDirection: 'row',
justifyContent: 'center',
// alignItems: 'flex-end',
// paddingTop: 600,
// paddingLeft: 1,
// paddingBottom: 400,
// marginBottom: 200,
// paddingHorizontal: 2,
// borderBottomLeftRadius: 1,
// borderBottomRightRadius: 1,
},
/******** card components **************/
title: {
fontSize: 24,
flex: 1,
color: "#00a63f",
},
time: {
fontSize: 15,
color: "white",
marginTop: 5
},
socialIcon: {
width: 40,
height: 40,
// fill="#ff0000",
},
/******** social bar ******************/
socialBarContainer: {
// justifyContent: 'flex-end',
// alignItems: 'flex-end',
flexDirection: 'row',
backgroundColor: 'transparent',
marginBottom: 1,
// flex: 1
},
socialBarSection: {
// justifyContent: 'flex-end',
flexDirection: 'row',
paddingLeft: 30,
// flex: 1,
},
socialBarButton: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
socialCount: {
// marginLeft: 2,
padding: 4,
color: '#ffffff',
fontSize: 20,
},
// if block css buttons
ifContainer: {
// flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent',
position: 'relative',
paddingTop: 200,
},
buttonContainer: {
height: 45,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
width: 200,
borderRadius: 30,
backgroundColor: 'transparent'
},
greenButton: {
backgroundColor: "#00a63f",
shadowColor: "#808080",
shadowOffset: {
width: 0,
height: 9,
},
shadowOpacity: 0.50,
shadowRadius: 12.35,
elevation: 19,
},
blueButton: {
backgroundColor: "#4e8bd1",
shadowColor: "#808080",
shadowOffset: {
width: 0,
height: 9,
},
shadowOpacity: 0.50,
shadowRadius: 12.35,
elevation: 19,
},
buttonText: {
color: 'white',
fontSize: 20,
padding: 3,
fontWeight: 'bold',
textShadowColor: 'rgba(0, 0, 0, 0.75)',
textShadowOffset: { width: -1, height: 1 },
textShadowRadius: 10
},
});
If you find any errors in the code tell me i will correct it as soon as possible .
来源：https://stackoverflow.com/questions/59190227/react-native-video-all-videos-are-auto-playing-at-a-time-in-the-background-how