概述

视频播放可以自己写原生代码实现,然后注入JS。如果对视频播放没有特殊要求的话,可以直接使用现成插件。

到官方推荐的插件网站搜索找到下载量第一的插件:react-native-video

安装

安装很简单:

npm install -g react-native-video

配置

配置过程官网已经介绍的很详细了,这里再复述一遍。

首先运行react-native link来链接react-native-videolibrary(说实话这一步具体作用是干啥我还没弄明白)。

然后修改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学习笔记(六)集成视频播放的更多相关文章

  1. Windows phone 8 学习笔记(9) 集成

    原文:Windows phone 8 学习笔记(9) 集成 本节整理了之前并没有提到的Windows phone 8 系统相关集成支持,包括选择器.锁定屏幕的.联系人的访问等.选择器列举了若干内置应用 ...

  2. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  3. java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

    java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...

  4. Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  5. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. python3.4学习笔记(六) 常用快捷键使用技巧,持续更新

    python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...

  7. Go语言学习笔记六: 循环语句

    Go语言学习笔记六: 循环语句 今天学了一个格式化代码的命令:gofmt -w chapter6.go for循环 for循环有3种形式: for init; condition; increment ...

  8. 【opencv学习笔记六】图像的ROI区域选择与复制

    图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...

  9. Linux学习笔记(六) 进程管理

    1.进程基础 当输入一个命令时,shell 会同时启动一个进程,这种任务与进程分离的方式是 Linux 系统上重要的概念 每个执行的任务都称为进程,在每个进程启动时,系统都会给它指定一个唯一的 ID, ...

  10. # go微服务框架kratos学习笔记六(kratos 服务发现 discovery)

    目录 go微服务框架kratos学习笔记六(kratos 服务发现 discovery) http api register 服务注册 fetch 获取实例 fetchs 批量获取实例 polls 批 ...

随机推荐

  1. python 如何把小数变成百分数格式

    1. 数据样本 ,valid_rate,homework_rate,inter_rate,playback_rate,zhujiang_good_comment5_rate,fudao_good_co ...

  2. BBS(第一天)项目之 注册功能实现通过forms验证与 前端ajax请求触发查询数据库判断用户是否存在的功能实现

    1.BBS项目之注册功能通过forms验证 from django import forms from blog.models import User from django.contrib.auth ...

  3. ios黑科技

    1.brew brew 是 Mac 下的一个包管理工具,类似于 centos 下的 yum,可以很方便地进行安装/卸载/更新各种软件包,例如:nodejs, mysql等,可以用来快速搭建各种本地环境 ...

  4. hdu2089-不要62-(数位dp)

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. CF 317 A. Lengthening Sticks(容斥+组合数学)

    传送门:点我 A. Lengthening Sticks  time limit per test        1 second You are given three sticks with po ...

  6. [leetcode]205. Isomorphic Strings 同构字符串

    Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...

  7. [leetcode]54. Spiral Matrix螺旋矩阵

    Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...

  8. Android开发中同时存在多个ListView的处理

    在Android开发过程中,有的时候我们需要在一个页面中通过多个ListView展示不同的数据,让用户直观上感觉是一个ListView在变换着数据. 假设有两个ListView,listView1和L ...

  9. spring boot项目升级到2.0.1,提示java.lang.ClassNotFoundException: org.apache.log4j.Logger错误

    首先肯定是版本出现了一点兼容问题 所以我就进入项目,查看依赖树,cd到项目目录下,mvn dependency:tree 我看到我的项目原先是1.5.9和现在2.0.1的区别在于org.slf4j的依 ...

  10. python基础之Day8

    一.什么是文件 文件是操作系统为用户或应用程序提供的一个读写硬盘的虚拟单位 文件的操作核心就:读.写 即我们只需要对于进行读写操作,就是对操作系统发起请求,然后由操作系统将用户或者应用程序对文件的读写 ...