CODEWITHSUNDEEP
react-native
Saeed Heidarizarei
Saeed Heidarizarei

Reputation: 8946

Can't pause in react native video

I want to play an audio file, But it's playing automaticaly and I can't pause That.

How Can I Fix That?
That Must be Paused at the begin
My Code:

import Video from 'react-native-video';

export default class Android extends Component {
  constructor(props) {
    super(props)
    this.state = {
      paused: true,
    }
  }

  video: Video;

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
        <Video
          ref={(ref: Video) => { this.video = ref }}
          source={{ uri: "http://s3.picofile.com/d/7376893331/8b7bc5b4-4b5e-47c4-96dd-b0c13fd18157/Sara_Diba_Delbare_Man.mp3", mainVer: 1, patchVer: 0 }}
          paused={this.state.paused}
        />
      </View>
    );
  }
}

Upvotes: 5

Views: 14675

Answers (3)

Mujtaba Ali
Mujtaba Ali

Reputation: 23

try this:

const [isPaused, setIsPaused] = useState(false);

<Video
paused={isPaused}
onLoad={() => { setIsPaused(true); }}
/>

Upvotes: 0

Codemaker2015
Codemaker2015

Reputation: 15726

Use ref attribute to create a link to the video and using that reference we can able to use video controls on the video component

Try this code,

import React from "react";
class VideoDemo extends React.Component {
  
  getVideo = elem => {
    this.video = elem
  }

  playVideo = () => {
    // You can use the play method as normal on your video ref
    this.video.play()
  };

  pauseVideo = () => {
    // Pause as well
    this.video.pause();
  };

  render = () => {
    return (
      <div>
        <video
          ref={this.getVideo}
          src="http://techslides.com/demos/sample-videos/small.mp4"
          type="video/mp4"
        />

        <div>
          <button onClick={this.playVideo}>
            Play!
          </button>
          <button onClick={this.pauseVideo}>
            Pause!
          </button>
        </div>
      </div>
    );
  };
}

export default VideoDemo;

Upvotes: -2

therobinkim
therobinkim

Reputation: 2568

There's currently a bug in react-native-video where the pause flag is ignored when the component is first loaded. You have to change pause AFTER the component has loaded.

First, make sure your this.state.pause = false. Then:

<Video
  paused={this.state.paused}
  onLoad={() => {
    this.setState({
      paused: true
    });
  }}
</Video>

Context: https://github.com/react-native-community/react-native-video/issues/494#issuecomment-281853423

Upvotes: 13

Related Questions