CODEWITHSUNDEEP
react-native
FortuneCookie
FortuneCookie

Reputation: 1865

React-Native Video autoplay code not working

My requirement is when the page loads the video should be start playing from the local storage and but it doesnt play at all. Initially the state paused:true , and when the video loads i tried to change the state to false , but the video doesnt play automatically.

<Video
  onEnd={this.handleEnd}
  onLoad={this.handleLoad}
  onProgress={this.handleProgress}
  autoplay={true}
  paused={this.state.paused}
  ref={ref=> {
    this.player = ref;
  }}
  resizeMode="cover"
  source={{uri:this.state.v_url}}
  volume={this.state.muted==true?0.0:1.0}
  muted={this.state.muted}
/>

handleLoad = (meta) => {
  console.log('Its working',this.props)
  this.setState({
  duration:meta.duration,
  paused:false,
})

Upvotes: 2

Views: 9323

Answers (1)

sv Math Tutor
sv Math Tutor

Reputation: 96

Use @coffeebeanslabs/react-native-inviewport to detect whether your component is in your device viewport:

Install using: npm i @coffeebeanslabs/react-native-inviewport

then do the following in your code:

import InViewPort from "@coffeebeanslabs/react-native-inviewport";

checkVideoVisible(isVideoVisible) { 
    this.setState({videoVisible: isVideoVisible});
}

<InViewPort onChange={(isVideoVisible) => this.checkVideoVisible(isVideoVisible)}>
    <Video
        paused={!this.state.videoVisible} 
    />
</InViewPort>

Upvotes: 3

Related Questions