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

Posted 寒夜美美

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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://github.com/abbasfreestyle/react-native-af-video-player

以上是关于react-native 视频播放器(很不错哦)的主要内容,如果未能解决你的问题,请参考以下文章

React-Native 视频不播放音频

React-Native <Video> 如何在 Android 上播放一次视频后重新开始播放?

如何通过链接将视频直接分享到 facebook/instagram 作为可以使用 react-native 直接播放的视频

如何在 react-native 中处理列表视图内的视频视图播放

播放 Dash 或 .mpd 视频 react-native(IOS)

如何在 react-native 中实现具有透明背景的视频