react-native-aliyun-playview
封装阿里云视频点播播放器与短视频上传功能,支持视频播放过程中stop()、pause()、resume()、reset()、rePlay()、seekToTime()等Api调用.
安装方法
执行npm i react-native-aliyun-playview --save安装组件
react-native link react-native-aliyun-playview链接Android和iOS原生模块
Android端额外配置
在项目app build.gradle做以下配置,然后clean build运行
repositories { flatDir { dirs 'libs','../../node_modules/react-native-aliyun-playview/android/libs' //this way we can find the .aar file in libs folder }}
iOS端额外配置
直接进入ios目录执行pod install然后关闭Xcode重新打开项目完成所有依赖.
视频播放使用方法
先通过接口以STS的形式返回securityToken然后打开开关showAliyunPlayView对视频组件进行渲染.
; showAliyunPlayView ? <AliyunPlayView ref= { thisvideoRef = ref; } style=stylesuf1 prepareAsyncParams= type: 'vidSts' vid: thisvid accessKeyId: aliyunAccessKeyId accessKeySecret: aliyunAccessKeySecret securityToken: securityToken onPlayingCallback= { console; this; } onEventCallback= { console; //视频加载结束 if NumberdatanativeEventevent === AliYunVideoEventTypeAliyunVodPlayerEventFirstFrame thisviewRef && thisviewRef; //视频播放结束 if datanativeEventevent === AliYunVideoEventTypeAliyunVodPlayerEventFinish console; thisvideoPlayEnd = true; this; } /> : null paused ? <View style=stylesupa left: width / 2 - top: videoViewHeight / 2 - > <CachedImage style= source= onPress= { if thisvideoPlayEnd thisvideoRef && thisvideoRef; this; else if paused thisvideoRef && thisvideoRef; this; else thisvideoRef && thisvideoRef; this; thisvideoPlayEnd = false; } /> </View> : null
//阿里云视频点播事件枚举状态
短视频上传使用方法
先调用接口获取视频上传凭证,然后直接通过原生模块上传, 然后通过监听getUploadState事件捕捉上传进度
{ if videoPath NativeModulesAliyunRecordModule; else Toast; ; };
const AliyunRecordModule = NativeModules;//阿里云视频点播视频上传模块const AliyunRecordModulerEmitter = AliyunRecordModule; AliyunRecordModulerEmitter;
视频播放效果图
相关链接短视频前后摄像头交叉续拍组件react-native-camera-continued-shooting