react-native-video实现视频全屏播放的方法


Posted in Javascript onMarch 19, 2018

react-native-video 是github上一个专用于React Native做视频播放的组件。这个组件是React Native上功能最全最好用的视频播放组件,还在持续开发之中,虽然还有些bug,但基本不影响使用,强力推荐。

本篇文章主要介绍下怎么使用react-native-video播放视频,以及如何实现全屏播放,屏幕旋转时视频播放器大小随之调整,显示全屏或收起全屏。

首先来看看react-native-video有哪些功能。

基本功能

  1. 控制播放速率
  2. 控制音量大小
  3. 支持静音功能
  4. 支持播放和暂停
  5. 支持后台音频播放
  6. 支持定制样式,比如设置宽高
  7. 丰富的事件调用,如onLoad,onEnd,onProgress,onBuffer等等,可以通过对应的事件进行UI上的定制处理,如onBuffer时我们可以显示一个进度条提示用户视频正在缓冲。
  8. 支持全屏播放,使用presentFullscreenPlayer方法。这个方法在iOS上可行,在android上不起作用。参看 issue#534 ,#726也是同样的问题。
  9. 支持跳转进度,使用seek方法跳转到指定的地方进行播放
  10. 可以加载远程视频地址进行播放,也可以加载RN本地存放的视频。

注意事项

react-native-video通过source属性设置视频,播放远程视频时使用uri来设置视频地址,如下:

source={{uri: http://www.xxx.com/xxx/xxx/xxx.mp4}}

播放本地视频时,使用方式如下:

source={require('../assets/video/turntable.mp4')}

需要注意的是,source属性不能为空,uri或本地资源是必须要设置的,否则会导致app闪退。uri不能设置为空字符串,必须是一个具体的地址。

安装配置

使用 npm i -S react-native-video 或 yarn add react-native-video 安装,完成之后使用 react-native link react-native-video 命令link这个库。

Android端在执行完link命令后,gradle中就已经完成了配置。iOS端还需要手动配置一下,这里简单说一下,与官方说明不同的是,我们一般不使用tvOS的,选中你自己的target,在build phases中先移除掉自动link进来的 libRCTVideo.a 这个库,然后点击下方加号重新添加 libRCTVideo.a ,注意不要选错。

react-native-video实现视频全屏播放的方法

视频播放

实现视频播放其实很简单,我们只需要给Video组件设置一下source资源,然后设置style调整Video组件宽高就行了。

<Video
 ref={(ref) => this.videoPlayer = ref}
 source={{uri: this.state.videoUrl}}
 rate={1.0}
 volume={1.0}
 muted={false}
 resizeMode={'cover'}
 playWhenInactive={false}
 playInBackground={false}
 ignoreSilentSwitch={'ignore'}
 progressUpdateInterval={250.0}
 style={{width: this.state.videoWidth, height: this.state.videoHeight}}
/>

其中videoUrl是我们用来设置视频地址的变量,videoWidth和videoHeight是用来控制视频宽高的。

全屏播放的实现

视频全屏播放其实就是在横屏情况下全屏播放,竖屏一般都是非全屏的。要实现设备横屏时视频全屏显示,说起来很简单,就是通过改变Video组件宽高来实现。

上面我们把videoWidth和videoHeight存放在state中,目的就是为了通过改变两个变量的值来刷新UI,使视频宽高能随之改变。问题是,怎样在设备的屏幕旋转时及时获取到改变后的宽高呢?

竖屏时我设置的视频初始宽度为设备屏幕的宽度,高度为宽度的9/16,即按16:9的比例显示。横屏时视频的宽度应为屏幕的宽度,高度应为当前屏幕的高度。由于横屏时设备宽高发生了变化,及时获取到宽高就能及时刷新UI,视频就能全屏展示了。

刚开始我想到的办法是使用 react-native-orientation 监听设备转屏的事件,在回调方法中判断当前是横屏还是竖屏,这个在iOS上是可行的,但是在Android上横屏和竖屏时获取到宽高值总是不匹配的(比如,横屏宽384高582,竖屏宽582高384,显然不合理),这样就无法做到统一处理。

所以,监听转屏的方案是不行的,不仅费时还得不到想要的结果。更好的方案是在render函数中使用View作为最底层容器,给它设置一个"flex:1"的样式,使其充满屏幕,在View的onLayout方法中获取它的宽高。无论屏幕怎么旋转,onLayout都可以获取到当前View的宽高和x、y坐标。

/// 屏幕旋转时宽高会发生变化,可以在onLayout的方法中做处理,比监听屏幕旋转更加及时获取宽高变化
 _onLayout = (event) => {
 //获取根View的宽高
 let {width, height} = event.nativeEvent.layout;
 console.log('通过onLayout得到的宽度:' + width);
 console.log('通过onLayout得到的高度:' + height);
 
 // 一般设备横屏下都是宽大于高,这里可以用这个来判断横竖屏
 let isLandscape = (width > height);
 if (isLandscape){
  this.setState({
  videoWidth: width,
  videoHeight: height,
  isFullScreen: true,
  })
 } else {
  this.setState({
  videoWidth: width,
  videoHeight: width * 9/16,
  isFullScreen: false,
  })
 }
 };

这样就实现了屏幕在旋转时视频也随之改变大小,横屏时全屏播放,竖屏回归正常播放。注意,Android和iOS需要配置转屏功能才能使界面自动旋转,请自行查阅相关配置方法。

播放控制

上面实现了全屏播放还不够,我们还需要一个工具栏来控制视频的播放,比如显示进度,播放暂停和全屏按钮。具体思路如下:

  1. 使用一个View将Video组件包裹起来,View的宽高和Video一致,便于转屏时改变大小
  2. 设置一个透明的遮罩层覆盖在Video组件上,点击遮罩层显示或隐藏工具栏
  3. 工具栏中要显示播放按钮、进度条、全屏按钮、当前播放时间、视频总时长。工具栏以绝对位置布局,覆盖在Video组件底部
  4. 使用react-native-orientation中的lockToPortrait和lockToLandscape方法强制旋转屏幕,使用unlockAllOrientations在屏幕旋转以后撤销转屏限制。

这样才算是一个有模有样的视频播放器。下面是竖屏和横屏的效果图

react-native-video实现视频全屏播放的方法

react-native-video实现视频全屏播放的方法

再也不必为presentFullscreenPlayer方法不起作用而烦恼了,全屏播放实现起来其实很简单。具体代码请看demo: https://github.com/mrarronz/react-native-blog-examples/tree/master/Chapter7-VideoPlayer/VideoExample 。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
用js实现in_array的方法
Nov 05 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
JS排序之选择排序详解
Apr 08 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
vue实现树形菜单效果
Mar 19 #Javascript
VUE重点问题总结
Mar 19 #Javascript
p5.js入门教程之键盘交互
Mar 19 #Javascript
vue 实现的树形菜的实例代码
Mar 19 #Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 #Javascript
jQuery替换节点元素的操作方法
Mar 18 #jQuery
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 #Javascript
You might like
解析smarty模板中类似for的功能实现
2013/06/18 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
python 调用c语言函数的方法
2017/09/29 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python的链表基础知识点
2020/09/13 Python
通过实例解析python and和or使用方法
2020/11/14 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
三好学生自我鉴定
2013/12/17 职场文书
农林环境专业求职信
2014/03/13 职场文书
应届生求职信
2014/05/31 职场文书
参赛口号
2014/06/16 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
Python的三个重要函数详解
2022/01/18 Python