kiri
kiri

Reputation: 2007

Add TouchableOpacity for react-native-video-controls

All,

We are developing an app in react-native with video capability, and we are using react-native-video-controls module for handling it.

One use case is we have to display the video files in a grid, and when we click on each item, it should play in full mode like in whats app.

Can we resize the video player in the grip and have a play button? So that when clicking on the play button, it should open in full mode.

Not able to implement Button the video.

  <VideoPlayer 
    onPress={()=> { this.props.playMedia(this.props.content) }} 
    source={{ uri: this.props.content }} 
    disableVolume 
    disableFullscreen
    paused={true} 
    fullscreen={false} 
    disableSeekbar 
    disableVolume 
    disableTimer 
    disableBack 
    onPlay={() => { this.props.playMedia(this.props.content) }} >
         {/* <TouchableOpacity 
               onPress={() => { console.log(this.props.content); 
                          this.props.playMedia(this.props.content) 
                        }} >
             </TouchableOpacity> 
          */}
</VideoPlayer>

Upvotes: 1

Views: 979

Answers (1)

Denys Reshetnyk
Denys Reshetnyk

Reputation: 66

You can just create Touchable Opacity with absolute positioning and than play video by changing 'paused' prop value in VideoPlayer

Upvotes: 1

Related Questions