react-native 视频播放器(很不错哦)
第一步:
npm i -S react-native-af-video-player(安装前:先安装: react-native-video、react-native-keep-awake、react-native-vector-icons、react-native-orientation、react-native-linear-gradient)
第二步:
react-native link react-native-video react-native link react-native-keep-awake react-native link react-native-vector-icons react-native link react-native-orientation react-native link react-native-linear-gradient
具体实现:
import React from 'react'
import { AppRegistry, StyleSheet, View } from 'react-native'
import Video from 'react-native-af-video-player'
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: "center"
},
videocontent: {
width: 1000,
height: 660
},
})
const url = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
export default class VideoExample extends React.Component {
render() {
return (
<View style={styles.container}>
<Video
autoPlay={true}
loop={true}
style={styles.videocontent}
fullScreenOnly={false}
inlineOnly={true}
url={url} />
</View>
)
}
}
实现效果图:
![](https://images2018.cnblogs.com/blog/613461/201805/613461-20180527204625083-1302315995.png)
其他设置参考:https://github.com/abbasfreestyle/react-native-af-video-player
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步