react-native - 播放新视频时暂停视频 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;
解决方案
推荐阅读
- python - 如何根据索引同时从 Python 列表中删除多个值?
- powershell - 如何在powershell中第一次发生错误时退出脚本?
- bash - Bash 脚本 - 在 case 结构或 if else 语句中不执行读取命令
- html - 网站在 Chrome 移动调试版本上看起来很好,但在我的手机上看起来不同
- python - pandas 中列表和列表的梳理
- sql-server - 在分区方案上创建表与在分区方案上创建集群索引有什么区别
- assembly - 基于时间的流程管理是如何实现的
- azure-api-management - 如何使用 Azure API 管理为公共合作伙伴和我自己的应用程序发布端点集合
- flutter - Flutter 应用在 APK 文件中没有 Internet 权限
- node.js - 如何使用 Cheerio JS 打印属性的第三个实例