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 {
mavenCentral()
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对视频组件进行渲染.
import AliyunPlayView from 'react-native-aliyun-playview';
{showAliyunPlayView ? (
<AliyunPlayView
ref={ref => {
this.videoRef = ref;
}}
style={[styles.uf1]}
prepareAsyncParams={{
type: 'vidSts',
vid: this.vid,
accessKeyId: aliyunAccessKeyId,
accessKeySecret: aliyunAccessKeySecret,
securityToken: securityToken
}}
onPlayingCallback={data => {
console.log(data.nativeEvent.currentTime, data.nativeEvent.duration);
this.setState({
currentTime: data.nativeEvent.currentTime,
duration: data.nativeEvent.duration
});
}}
onEventCallback={data => {
console.log('onEventCallback', data.nativeEvent);
//视频加载结束
if (Number(data.nativeEvent.event) === AliYunVideoEventType.AliyunVodPlayerEventFirstFrame) {
this.viewRef && this.viewRef.hideLoading();
}
//视频播放结束
if (data.nativeEvent.event === AliYunVideoEventType.AliyunVodPlayerEventFinish) {
console.log('播放结束');
this.videoPlayEnd = true;
this.setState({paused: true, currentTime: this.state.duration});
}
}}
/>
) : null}
{paused ? (
<View
style={[styles.upa, {left: width / 2 - scaleSize(25)}, {top: videoViewHeight / 2 - scaleSize(33)}]}>
<CachedImage
style={[w(50), h(66)]}
source={require('../img/ico_video_play_one.png')}
onPress={() => {
if (this.videoPlayEnd) {
this.videoRef && this.videoRef.rePlay();
this.setState({paused: false});
} else if (paused) {
this.videoRef && this.videoRef.resume();
this.setState({paused: false});
} else {
this.videoRef && this.videoRef.pause();
this.setState({paused: true});
}
this.videoPlayEnd = false;
}}
/>
</View>
) : null}//阿里云视频点播事件枚举状态
export enum AliYunVideoEventType {
AliyunVodPlayerEventPrepareDone,
AliyunVodPlayerEventPlay,
AliyunVodPlayerEventFirstFrame,
AliyunVodPlayerEventPause,
AliyunVodPlayerEventStop,
AliyunVodPlayerEventFinish,
AliyunVodPlayerEventBeginLoading,
AliyunVodPlayerEventEndLoading,
AliyunVodPlayerEventSeekDone
}短视频上传使用方法
先调用接口获取视频上传凭证,然后直接通过原生模块上传, 然后通过监听getUploadState事件捕捉上传进度
uploadVideoToAliYun = (type: string, videoPath: string, uploadAuth: string) => {
if (videoPath.includes('mp4')) {
NativeModules.AliyunRecordModule.uploadVideo({
accessKeyId: aliyunAccessKeyId,
accessKeySecret: aliyunAccessKeySecret,
securityToken: uploadAuth,
mp4Path: videoPath,
//type用于回传，如果是三个上传任务同时异步执行，相当于jobId标记
type: type
});
} else {
Toast.message('视频上传格式出错，请重新录制');
tagUploadVideoState(type);
}
};const {AliyunRecordModule} = NativeModules;
//阿里云视频点播视频上传模块
const AliyunRecordModulerEmitter = new NativeEventEmitter(AliyunRecordModule);
AliyunRecordModulerEmitter.addListener('getUploadState', (data: { code: number; message: string; vid: string; type: string }) => {
let dataTmp = parseData(data);
if (dataTmp.code === Api.NetworkState.SUCCESS) {
// Toast.message('vid上传服务端' + dataTmp.type + dataTmp.vid);
console.log('vid上传服务端', dataTmp.type, dataTmp.vid);
this.uploadFinished(dataTmp.type, dataTmp.vid);
} else {
Toast.message(JSON.stringify(data));
}
});视频播放效果图
相关链接短视频前后摄像头交叉续拍组件react-native-camera-continued-shooting