React Native视频播放(iOS)

发布时间:2020-06-25 01:05:16 作者:maoyazhi
来源:网络 阅读:640

网站链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/learn-react-native-video/

React Native项目中插入视频播放的简单教程(iOS)。

在你的项目中执行以下步骤:

1.运行npm install react-native-video --save
2.iOS下:

(1)在Xcode中打开你的项目,在名字为Libraries上点右键,然后点击Add Files to "Your Project Name";

React Native视频播放(iOS) React Native视频播放(iOS)

(2)添加libRTCVideo.a到 Build Phases -> Link Binary With Libraries 

React Native视频播放(iOS)

(3)添加 项目中的.mp4 格式的视频文件到 Build Phases -> Copy Bundle Resources

React Native视频播放(iOS)

(4)在你的项目中使用以下命令就可以得到你想引用的视频:

调用视频用法:

React Native视频播放(iOS)

// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.<Video source={{uri: "background"}} // Can be a URL or a local file.
       rate={1.0}                   // 0 is paused, 1 is normal.
       volume={1.0}                 // 0 is muted, 1 is normal.
       muted={false}                // Mutes the audio entirely.
       paused={false}               // Pauses playback entirely.
       resizeMode="contain"           // Fill the whole screen at aspect ratio.
       repeat={true}                // Repeat forever.
       onLoadStart={this.loadStart} // Callback when video starts to load
       onLoad={this.setDuration}    // Callback when video loads
       onProgress={this.setTime}    // Callback every ~250ms with currentTime
       onEnd={this.onEnd}           // Callback when playback finishes
       onError={this.videoError}    // Callback when video cannot be loaded
       style={styles.backgroundVideo} />// Later on in your styles..
var styles = Stylesheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});


推荐阅读:
  1. React JS和React-Native学习指南
  2. react-native-video实现视频全屏播放的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

native react ct

上一篇:Alamofire +ObjectMapper模型: 上传单张图片,上传多张图片。

下一篇:软件测试和硬件测试的不同

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》