首页 > 解决方案 > 播放新视频时暂停视频 react-native-video play

问题描述

我在一个页面上有几个视频播放器..想一次只播放一个视频,所以当一个视频正在播放时,任何其他在停止之前正在播放的视频......我的想法是识别具有被点击然后让它成为唯一允许播放的视频,因此之前播放的任何内容都应该暂停。我不知道该怎么做...

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;

标签: react-nativereact-native-video

解决方案


推荐阅读