您的位置:首页 > Web前端 > React

React Native视频播放(iOS)

2016-03-04 08:56 661 查看
网站链接: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";



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

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

(4)在你的项目中使用以下命令就可以得到你想引用的视频:调用视频用法:
// 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,
},
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Native React