I have a very simple test app running on an iPad (see code below).
The thing is, whenever I try to play the video after pausing it, the app hangs for a while, and then plays the it very fast, as if trying to compensate.
I’ve tried the same code on an Android device and it works as expected.
Has anyone else experienced this? Is there anything I should be doing differently?
Here is the app:
import React from "react";
import { StyleSheet, Text, View, TouchableWithoutFeedback } from "react-native";
import { Video } from "expo";
export default class App extends React.Component {
state = { isPlaying: true };
toggleVideo = () => {
const { isPlaying } = this.state;
if (isPlaying) {
this.video.pauseAsync();
} else {
this.video.playAsync();
}
this.setState({ isPlaying: !isPlaying });
};
render() {
return (
<View style={styles.container}>
<TouchableWithoutFeedback onPress={this.toggleVideo}>
<Video
source={{
uri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4"
}}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="contain"
shouldPlay
isLooping
style={{ width: "100%", height: "100%" }}
ref={video => (this.video = video)}
/>
</TouchableWithoutFeedback>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});