我正在做一个Android视频库应用程序,如YouTube使用React原生,因为我正在使用'React原生视频',软件包虽然使用它,我有一个视频自动播放选项的问题,所有的视频都在后台播放一次,而不查看视频,另一个问题是所有的视频controls={true}
显示滚动视频时,他们没有沿着视频移动。我做这一切内FlatList我的代码:
import React, { Component, PropTypes } from "react";
import {
AppRegistry, Image, Platform, StyleSheet, Text, View, TextInput, Button, TouchableHighlight, Alert,
TouchableOpacity, ScrollView, ColorPropType, FlatList, SectionList, Dimensions,
Keyboard, Modal, NativeModules, SafeAreaView, StatusBar, ViewPropTypes,
} from 'react-native';
import Video from 'react-native-video';
export default class HomeScreen extends Component {
constructor(Props) {
super(Props);
this.state = {
error: null,
paused: true,
playing: false,
};
}
render() {
return (
<View style={styles.container}>
<View style={styles.tabContent}>
<FlatList style={styles.list}
data={this.state.all_Posts}
keyExtractor={(data_posts, index) => {
return data_posts.id.toString();
}}
ItemSeparatorComponent={() => {
return (
<View style={styles.separator} />
)
}}
renderItem={(post, id) => {
const items = post.item;
return (
<View style={styles.card}>
<View style={styles.cardHeader}>
<View>
<Video
ref={ref => this.player = ref}
source={{ uri: "http://192.168.1.2:3200/" + items.file_Name }}
style={{ width: '100%', height: 700 }}
resizeMode="cover
volume={1.0}
controls={true}
volume={this.state.volume}
muted={this.state.muted}
paused={this.state.paused}
onLoad={this.onLoad}
onBuffer={this.onBuffer}
onError={this.videoError}
onProgress={this.onProgress}
/>
</View>
</View>
)
}}
/>
</View>
</View>
)
}
}
一旦检查清楚的代码,告诉我如何才能播放视频只有当用户查看它,在剩余的时间,它是在暂停模式。和视频controls={true}
需要移动或隐藏沿着video.So请帮助我找到这两个问题的解决方案。
1条答案
按热度按时间nhhxz33t1#
您可以使用React Native Media Controls来自定义视频控件所需的一切。它只是简单地操纵视频控件。
它的用法也很简单:
这是https://github.com/charliesbot/react-native-media-controls的原始分支,因为他不主动维护库,所以我继续使用他的分支。
我相信这个图书馆会解决你的问题。