Strange behavior on iOS (Video component)

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"
  }
});

Hi-

I think this is likely a bug with the Video component.
Can you file an issue on Github here?

?

Sorry for the trouble.

Charlie

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.