0

I have several Video players on a page.. would like to play only one video at a time so when one is playing, any other that was playing before stops... The Idea I had is to identify the ID of the video that has been tapped on then let this be the only video that is allowed to play so whatever was playing before should be paused. I am not sure of how to do this...

const MediaItem =({result}) => {
    const [currentVideoPlayingId, setCurrentVideoPlayingId] = useState(' ')


        const oneVideoPlaying = ()=>{
            setCurrentVideoPlayingId(result.id)
        }
        console.log('currentVideoPlaying Id:',currentVideoPlayingId)
        return (
            <View style={styles.Container}>
                <Card style={styles.CardView}>

                    <View style={styles.VideoItem}>

                    <VideoPlayer
                        video= {{uri:result.video_url} }
                        videoWidth={1600}
                        videoHeight={900}
                        ignoreSilentSwitch={"ignore"}
                        style={styles.Vid}
                        onStart={oneVideoPlaying}
                        thumbnail={{uri:result.thumbnail_url}}
/>
                    </View>
                    <Card.Title title={result.title} subtitle={result.description}  />
                </Card>

            </View>
        );
    }


const styles = StyleSheet.create ({
    Container: {
        flex: 1
    },
    CardView:{
        marginLeft:10,
        marginRight:10,
        marginTop: 20,
        borderRadius:25,
        width:320,
        height:300
    },
    VideoItem:{

    },
    Vid:{
        borderTopLeftRadius:25,
        borderTopRightRadius:25,
    },


})

export default MediaItem;
DanielSmurts
  • 593
  • 5
  • 13
  • I don't know about react, but I have achieved "one video at a time" by JavaScript in HTML... If you want me to share my JavaScript function with you for YouTube API, then please let me know!! – Om_16 Jun 16 '20 at 12:51
  • How did you achieve that? – pratik jaiswal Aug 25 '20 at 13:02

0 Answers0