Javascript 如何在视口中重置视频和自动播放?
我正在尝试制作一个类似tik-tok的视频应用程序。我不知道如果这是正确的方法,我实现了一个平面列表并制作了一个post组件来渲染视频。但每次我回到上一篇文章,视频都被卡住了。我必须点击它多次开始视频,它从我离开的地方恢复。如何在视口中自动播放上一篇文章,以及如何重置视频以从头开始Javascript 如何在视口中重置视频和自动播放?,javascript,reactjs,react-native,Javascript,Reactjs,React Native,我正在尝试制作一个类似tik-tok的视频应用程序。我不知道如果这是正确的方法,我实现了一个平面列表并制作了一个post组件来渲染视频。但每次我回到上一篇文章,视频都被卡住了。我必须点击它多次开始视频,它从我离开的地方恢复。如何在视口中自动播放上一篇文章,以及如何重置视频以从头开始 const HomeScreen = () => { const [post, setPost] = useState([]); const [currentVisibleIndex, setCurre
const HomeScreen = () => {
const [post, setPost] = useState([]);
const [currentVisibleIndex, setCurrentVisibleIndex] = useState();
const route = useRoute();
const navigation = useNavigation();
useEffect(() => {
const fetchPost = async () => {
const results = await DataStore.query(Post);
setPost(results);
};
fetchPost();
}, []);
const onViewRef = useRef(({viewableItems, changed}) => {
console.log('Visible items are', viewableItems);
console.log('Changed in this iteration', changed);
setCurrentVisibleIndex(viewableItems);
});
const viewConfigRef = React.useRef({viewAreaCoveragePercentThreshold: 50});
return (
<View>
<FlatList
data={products}
viewabilityConfig={viewConfigRef.current}
onViewableItemsChanged={onViewRef.current}
renderItem={({item, index}) => <Post post={item} />}
showsVerticalScrollIndicator={false}
snapToInterval={Dimensions.get('window').height - 70}
snapToAlignment={'start'}
decelerationRate={'fast'}
/>
</View>
);
};
export default HomeScreen;
const主屏幕=()=>{
const[post,setPost]=useState([]);
const[currentVisibleIndex,setCurrentVisibleIndex]=useState();
const route=useRoute();
const navigation=useNavigation();
useffect(()=>{
const fetchPost=async()=>{
const results=wait DataStore.query(Post);
setPost(结果);
};
fetchPost();
}, []);
const onViewRef=useRef({viewableItems,changed})=>{
console.log('可见项为',可见项为');
log('在本次迭代中已更改',已更改);
setCurrentVisibleIndex(可视项);
});
const viewConfigRef=React.useRef({viewAreaCoveragePercentThreshold:50});
返回(
}
showsVerticalScrollIndicator={false}
snapToInterval={Dimensions.get('window')。高度-70}
snapToAlignment={'start'}
减速率={'fast'}
/>
);
};
导出默认主屏幕;
const Post=props=>{
const[post,setPost]=useState(props.post);
const[isLiked,setIsLiked]=useState(false);
const[videoUri,setVideoUri]=useState(“”);
const[paused,setPaused]=useState(false);
const navigation=useNavigation();
const onPlayPausePress=()=>{
setPaused(!paused);
};
const getVideoUri=async()=>{
setVideoUri(post.videoUri);
返回;
};
useffect(()=>{
getVideoUri();
log('hello');
},[props.index]);
console.log('暂停:',暂停);
返回(
console.log(e)}
resizeMode={'cover'}
重复={true}
暂停={暂停}
自动播放={true}
/>
{/*
{post.comments}
*/}
);
};
导出默认帖子;
const Post = props => {
const [post, setPost] = useState(props.post);
const [isLiked, setIsLiked] = useState(false);
const [videoUri, setVideoUri] = useState('');
const [paused, setPaused] = useState(false);
const navigation = useNavigation();
const onPlayPausePress = () => {
setPaused(!paused);
};
const getVideoUri = async () => {
setVideoUri(post.videoUri);
return;
};
useEffect(() => {
getVideoUri();
console.log('hello');
}, [props.index]);
console.log('paused:', paused);
return (
<View style={styles.container}>
<TouchableWithoutFeedback onPress={onPlayPausePress}>
<View>
<Video
source={{uri: videoUri}}
style={styles.video}
onError={e => console.log(e)}
resizeMode={'cover'}
repeat={true}
paused={paused}
autoplay={true}
/>
<View style={styles.uiContainer}>
{/* <View style={styles.iconContainer}>
<FontAwesome name={'commenting'} size={40} color="white" />
<Text style={styles.statsLabel}>{post.comments}</Text>
</View> */}
</View>
</View>
</TouchableWithoutFeedback>
</View>
);
};
export default Post;