码迷,mamicode.com
首页 > 其他好文 > 详细

react-native 视频播放器(很不错哦)

时间:2018-05-27 21:40:19      阅读:3536      评论:0      收藏:0      [点我收藏+]

标签:str   native   only   技术分享   gis   ignite   default   AC   return   

第一步:
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://github.com/abbasfreestyle/react-native-af-video-player

react-native 视频播放器(很不错哦)

标签:str   native   only   技术分享   gis   ignite   default   AC   return   

原文地址:https://www.cnblogs.com/candyzhmm/p/9097334.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!