ReactNative学习笔记(六)集成视频播放
概述
视频播放可以自己写原生代码实现,然后注入JS。如果对视频播放没有特殊要求的话,可以直接使用现成插件。
到官方推荐的插件网站搜索找到下载量第一的插件:react-native-video。
安装
安装很简单:
npm install -g react-native-video
配置
配置过程官网已经介绍的很详细了,这里再复述一遍。
首先运行react-native link
来链接react-native-video
library(说实话这一步具体作用是干啥我还没弄明白)。
然后修改android/settings.gradle
,增加如下内容:
include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
再修改android/app/build.gradle
,追加如下内容:
dependencies {
...
compile project(':react-native-video')
}
最后再修改Java代码的一个地方,如果是0.29.0以上版本(含),需要修改MainApplication.java
,否则修改MainActivity.java
:
增加:
import com.brentvatne.react.ReactVideoPackage;
.addPackage(new ReactVideoPackage())
可能遇到的错误
报错如下:
undefined is not an object (evaluating NativeModuels.UIManager.RCTVideo.Constants')
报这个错误大概有2个原因:
- 一个是你没有完全按照官网的方法一步步来,可能漏掉了哪一步;
- 还有一个就是我自己碰到了,都按照官网来了,但是不知为何没有重新编译,需要手动把apk卸载然后再编译运行才生效;
https://github.com/react-native-community/react-native-video/issues/272
如何使用
test-video.js:
import React, { Component } from 'react';
import { AppRegistry, Text, View, ToastAndroid } from 'react-native';
import Video from 'react-native-video';
export default class testVideo extends Component
{
onLoad(info)
{
// info == {currentTime,duration,...}
ToastAndroid.show('视频加载成功!', ToastAndroid.SHORT);
}
onError(e)
{
ToastAndroid.show('视频加载错误!', ToastAndroid.SHORT);
}
onProgress(info)
{
// info == {currentTime: 0, playableDuration: 0}
}
render() {
return (
<View style={{flex: 1}}>
<Text>视频播放测试:</Text>
<Video ref="myvideo" resizeMode='cover' source={{uri: "http://192.168.191.1/media/1.mp4"}}
style={{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0,}}
onLoad={this.onLoad} onError={this.onError} onProgress={this.onProgress} />
</View>
);
}
}
其中,进度事件每250毫秒调用一次,底层使用的是VideoView实现的。
定位:
this.refs['myvideo'].seek(seconds)
播放和暂停: 直接控制Video上面的paused={true}
参数值为true和false来控制。
完整示例
官网完整示例:
<Video source={{uri: "background"}} // Can be a URL or a local file.
ref={(ref) => {
this.player = ref
}} // Store reference
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="cover" // Fill the whole screen at aspect ratio.
repeat={true} // Repeat forever.
playInBackground={false} // Audio continues to play when app entering background.
playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown.
progressUpdateInterval={250.0} // [iOS] Interval to fire onProgress (default to ~250ms)
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 to trigger fullscreen
this.player.presentFullscreenPlayer()
// To set video position in seconds (seek)
this.player.seek(0)
// Later on in your styles..
var styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
视频格式问题
经测试,在模拟器上面很多MP4格式都播放不出来,可能和具体编码有关,也有可能是模拟器本身问题,对视频播放有更多要求的可以尝试使用react-native-vitamio
。
ReactNative学习笔记(六)集成视频播放的更多相关文章
- Windows phone 8 学习笔记(9) 集成
原文:Windows phone 8 学习笔记(9) 集成 本节整理了之前并没有提到的Windows phone 8 系统相关集成支持,包括选择器.锁定屏幕的.联系人的访问等.选择器列举了若干内置应用 ...
- react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置
参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...
- java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)
java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...
- Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记六:接口
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- python3.4学习笔记(六) 常用快捷键使用技巧,持续更新
python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...
- Go语言学习笔记六: 循环语句
Go语言学习笔记六: 循环语句 今天学了一个格式化代码的命令:gofmt -w chapter6.go for循环 for循环有3种形式: for init; condition; increment ...
- 【opencv学习笔记六】图像的ROI区域选择与复制
图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...
- Linux学习笔记(六) 进程管理
1.进程基础 当输入一个命令时,shell 会同时启动一个进程,这种任务与进程分离的方式是 Linux 系统上重要的概念 每个执行的任务都称为进程,在每个进程启动时,系统都会给它指定一个唯一的 ID, ...
- # go微服务框架kratos学习笔记六(kratos 服务发现 discovery)
目录 go微服务框架kratos学习笔记六(kratos 服务发现 discovery) http api register 服务注册 fetch 获取实例 fetchs 批量获取实例 polls 批 ...
随机推荐
- 06python上
product_list=[ ('Mac',9000), ('kindle',800), ('tesla',900000), ('python book',105), ('bike',2000), ] ...
- ---dd-wrt memo
http://blog.csdn.net/fyh2003/article/details/44458657http://blog.csdn.net/u010189241/article/details ...
- 去BAT,你应该要看一看的面试经验总结(转)
来源微信公众号『easyserverdev』 http://mp.weixin.qq.com/s/UZljzFMjobo1wzCguY7NDg 说下我的面试经验吧,都是亲身经历,不喜勿喷: 我去年12 ...
- CSS: Grid homework redact.
The web homework: Finished design: (I use six block with different color to show this homework and I ...
- cdn贝四层协议配置端口映射TCP端口转发
端口映射就是将外网主机的IP地址的一个端口映射到内网中一台机器,提供相应的服务.当用户访问该IP的这个端口时,服务器自动将请求映射到对应局域网内部的机器上.端口映射有动态和静态之分 1.安装好节点后初 ...
- 循环TRUNCATE表,再ENABLE约束索引等
CREATE OR REPLACE PROCEDURE STG.FP_REMOVE_MST_OLD_DATA (EXITCODE OUT NUMBER) IS /******************* ...
- Linux 进程通信方式
转载文章 进程通信的方式 管道( pipe ): 管道包括三种: 普通管道PIPE: 通常有两种限制,一是单工,只能单向传输;二是只能在父子或者兄弟进程间使用. 流管道s_pipe: 去除了第一种限制 ...
- hdu 1277 AC自动机入门(指针版和数组版)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1277 推荐一篇博客(看思路就可以,实现用的是java): https://www.cnblogs.co ...
- TZOJ 4602 高桥和低桥(二分或树状数组+二分)
描述 有个脑筋急转弯是这样的:有距离很近的一高一低两座桥,两次洪水之后高桥被淹了两次,低桥却只被淹了一次,为什么?答案是:因为低桥太低了,第一次洪水退去之后水位依然在低桥之上,所以不算“淹了两次”.举 ...
- 关于TP5.0搜索后分页
使用$Model->where($where)->paginate($page,$count);的时候如果点击下一页会出现条件重置问题,经过测试可以使用Db::name('data') - ...