React-Native视频组件react-native-video使用（安卓版）

转载请注明原文地址：http://www.cnblogs.com/ygj0930/p/7366019.html

一：安装

在IDE中打开你的项目，然后在IDE的terminal，输入：

npm i -S react-native-video

安装第三方的视频组件。

然后，执行以下命令，把下载回来的第三方库连接到本地库中：

 react-native link

二：使用
在RN的js文件中，引入视频播放组件：

import Video from 'react-native-video';

然后，在就可以使用这个组件来播放视频了。

播放本地视频：

<Videosource={require('./video/xx.mp4')}style={styles.播放器样式}rate={this.state.rate}                          // 控制暂停/播放，0 代表暂停paused, 1代表播放normal.paused={false}volume={1}                   // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数muted={true}                  // true代表静音，默认为false.resizeMode='contain'       // 视频的自适应伸缩铺放行为，onLoad={this.onLoad}                       // 当视频加载完毕时的回调函数onLoadStart={this.loadStart}            // 当视频开始加载时的回调函数onProgress={this.onProgress}   //  进度控制，每250ms调用一次，以获取视频播放的进度onEnd={this.onEnd}             // 当视频播放完毕后的回调函数onError={this.videoError}    // 当视频不能加载，或出错后的回调函数

    repeat={false}                            // 是否重复播放
/>

播放网络视频：

<Videosource={{uri:'视频url'}}style={styles.播放器样式}rate={this.state.rate}                          // 控制暂停/播放，0 代表暂停paused, 1代表播放normal.paused={false}volume={1}                   // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数muted={true}                  // true代表静音，默认为false.resizeMode='contain'       // 视频的自适应伸缩铺放行为，onLoad={this.onLoad}                       // 当视频加载完毕时的回调函数onLoadStart={this.loadStart}            // 当视频开始加载时的回调函数onProgress={this.onProgress}   //  进度控制，每250ms调用一次，以获取视频播放的进度onEnd={this.onEnd}             // 当视频播放完毕后的回调函数onError={this.videoError}    // 当视频不能加载，或出错后的回调函数

    repeat={false}                            // 是否重复播放
/>

React-Native视频组件react-native-video使用（安卓版）相关推荐

react中函数式组件React Hooks
React Hooks 函数式组件使用hooks理由高阶组件为了复用,导致代码层级复杂生命周期的复杂写成functional组件,无状态组件,因为需要状态,又改成了class,成本高在16. ...
React native 第三方组件 React native swiper
简介: 这个框架主要是用来做轮播图,焦点图等,内置了各种样式的轮播图. github地址: https://github.com/leecade/react-native-swiper 如何使用安装 ...
ffmpegguitool下载不了_FFmpeg GUI Tool下载|FFmpeg GUI Tool(视频处理)下载v1.2.4 安卓版
FFmpeg GUI Tool是一款极为强大的视频编辑软件,虽然强大但是这款软件需要配合其它的软件进行使用才能够完美的发挥出来这款软件全部的功能,你可以用其对音频和视频进行编码,在手机上面完成一系列的 ...
ffmpegguitool下载不了_FFmpeg GUI Tool下载-FFmpeg GUI Tool(视频处理)下载v1.2.4 安卓版-西西软件下载...
FFmpeg GUI Tool是一款极为强大的视频编辑软件,虽然强大但是这款软件需要配合其它的软件进行使用才能够完美的发挥出来这款软件全部的功能,你可以用其对音频和视频进行编码,在手机上面完成一系列的 ...
react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
React高阶组件探究
React高阶组件探究在使用React构建项目的过程中,经常会碰到在不同的组件中需要用到相同功能的情况.不过我们知道,去这些组件中到处编写同样的代码并不优雅. 在以往,为了解决以上的情况,我们会用到 ...
react leaflet_如何使用React Leaflet和Leaflet Gatsby Starter设置自定义Mapbox底图样式
react leaflet Building maps can be pretty powerful, but often you're stuck with open source options ...
菜鸟窝Android百度云视频,菜鸟窝React Native 视频系列教程
菜鸟窝React Native 视频系列教程交流QQ群:276960232 Hi,我是RichardCao,现任新美大酒店旅游事业群的Android Developer.15年加入饿了么即时配送BU ...
React Native 下载组件以及npm常用命令
一.React Native 下载组件: RN的组件都是需要从网上下载的.正常来说,我们通过npm start打开服务器之后,直接用npm下载即可.常用的组件,例如按钮,滚动等,都是可以直接下载的.下 ...
Android之React Native 中组件的生命周期
React Native 中组件的生命周期概述就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对 ...

React-Native视频组件react-native-video使用（安卓版）

React-Native视频组件react-native-video使用（安卓版）相关推荐

最新文章

热门文章