前言

最近工作业务用到了react-native-video，还需要能够全屏，全屏需要用到锁定应用方向（横屏），需要用到组件react-native-orientation-locker，本文记录使用方法以及提供一种解决思路。

react-native-orientation-locker

横竖屏方法

我就只介绍这常用的三个，其他的可以翻看官方文档

import Orientation from 'react-native-orientation-locker';
Orientation.lockToLandscapeLeft() // 向左方向锁定横屏
Orientation.lockToLandscapeRight() // 向右方向锁定横屏
Orientation.unlockAllOrientations(); // 解除锁定
Orientation.lockToPortrait(); // 锁定竖屏

react-native-video

导入

import Video from 'react-native-video';

函数部分

  // 设置总时长setDuration({ duration }) {this.setState({ duration });}// 播放结束可将暂停变量设置为trueonEnd() {this.setState({paused: true,});}// 缓冲，loading变量可控制缓冲圈显示onBuffer({ isBuffering }) {this.setState({ loading: isBuffering });}// 设置进度条和播放时间的变化，sliderValue用来同步步进器setTime({ currentTime }) {this.setState({sliderValue: currentTime,});}// 播放暂停changePlayed() {this.setState({ paused: !this.state.paused });}

视频组件

    <View style={styles.Video}>{loading ? <View style={styles.loading}><ActivityIndicator size='large' color='lightgray' /> // 缓冲圈</View> : null}<Videoref={(ref: Video) => {this.video = ref; // 视频Video的ref}}source={{uri: 'http://xxx/xxx.mp4', //播放路径}}style={{ width: '100%', height: '100%' }}rete={1}volume={1}paused={paused} // 暂停变量onEnd={() => {this.onEnd(); // 播放结束时执行}}onBuffer={data => this.onBuffer(data)} // 缓冲时执行,用于显示缓冲圈onProgress={data => this.setTime(data)} // 播放时执行函数,用于同步步进器进度onLoad={data => this.setDuration(data)} // 播放前得到总时长,用于步进器设置总长muted={muted} // 静音/></View>

控制台

    <View style={styles.videoControl}>{/* 暂停按钮 */}<TouchableOpacityonPress={() => {this.changePlayed();}}><Image style={styles.paused} source={paused ? pausedImg : played} /></TouchableOpacity><Slidervalue={sliderValue}maximumValue={duration}// onValueChange 和 onSlidingComplete 是修改步进器进度时触发的函数// 可以在此时同步视频播放,同步视频播放的函数是,video的Ref.seek()// 中间需要设置视频暂停和播放，否则边拖动边播放会很奇怪onValueChange={(value) => {this.video.seek(value);this.setState({paused: true,});}}onSlidingComplete={(value) => {this.video.seek(value);this.setState({paused: false,});}}style={styles.slider}/>{/* 静音按钮 */}<TouchableOpacityonPress={() => {this.setState({ muted: !muted });}}><Image style={{ marginLeft: 10, height: 24, width: 24 }} source={muted ? mute : sound} /></TouchableOpacity>{/* 全屏按钮 */}<TouchableOpacityonPress={() => {// 这里涉及到react-native-orientation-locker// 可以锁定应用为横屏，这里的状态设置是我的全屏解决方案this.setState({ fullVideoShow: true, sliderValue2: sliderValue }, () => {this.setState({ paused: true });// 需要将原视频暂停});Orientation.lockToLandscapeLeft();}}><Image style={{ marginLeft: 10, height: 20, width: 20 }} source={fullScreen} /></TouchableOpacity></View>

全屏实现方案（可参考）

我采用的是弹出层方案，使用Orientation横屏时，新建一个model层覆盖全屏，然后新建一个相同的播放组件，记得将原视频组件暂停。

可以参考的点，以下表示model层上的视频组件

  // 放大时，总长已经不需要再次获取，我们可以在onLoad2时将sliderValue赋值给video2// 达到放大时同步进度的效果onLoad2(data) {this.video2.seek(this.state.sliderValue);}// 设置vedio2的同步步进器2进度时，需要注意，currentTime>0再赋值// 否则在视频加载过程中会出现步进器2跳一下0再恢复的情况setTime2({ currentTime }) {if (currentTime > 0) {this.setState({sliderValue2: currentTime,});}}// 退出全屏outFullScreen() {const { sliderValue2, paused2 } = this.state;this.setState({ fullVideoShow: false, sliderValue: sliderValue2);Orientation.lockToPortrait();// 退出时将原视频进度同步this.video.seek(sliderValue2);}// 播放暂停changePlayed2() {this.setState({ paused2: !this.state.paused2 });}// 另外全屏时，要将原视频paused暂停，可以在全屏按钮事件那里我有提到。

放大视频

    <Modalvisible={fullVideoShow}transparentanimationType='slide'><View style={styles.videoModelBack}><View style={styles.videoModel}>{loading ? <View style={styles.loading}><ActivityIndicator size='large' color='lightgray' /> //缓冲圈可复用状态</View> : null}<View style={{ flex: 1 }}><Videoref={(ref: Video) => {this.video2 = ref;}}source={{uri: 'http://xxx/xxx.mp4',}}style={{ flex: 1 }}rete={1}volume={1}paused={paused2}onEnd={() => {this.onEnd(0);}}onBuffer={data => this.onBuffer(data)}onProgress={data => this.setTime2(data)}onLoad={data => this.onLoad2(data)}muted={muted}/></View></View><View style={styles.videoBack}><TouchableOpacityonPress={() => {this.changePlayed2();}}><Image style={[styles.paused]} source={paused2 ? pausedImg : played} /></TouchableOpacity><Slidervalue={sliderValue2}maximumValue={duration}onValueChange={(value) => {this.video2.seek(value);this.setState({paused2: true,});}}onSlidingComplete={(value) => {this.video2.seek(value);this.setState({paused2: false,});}}style={styles.slider}/><TouchableOpacityonPress={() => {this.setState({ muted: !muted });}}><Image style={styles.img} source={muted ? mute : sound} /></TouchableOpacity><TouchableOpacityonPress={() => {this.outFullScreen();}}><Image source={outFullScreen} /> // 退出全屏按钮</TouchableOpacity></View></View></Modal>

尾言

样式我没有写出来，因为内容可能比较多，布局情况也不大相同，想完全复用不太现实，不过如果你耐心点理解重要的部分，相信你会有所收获。

如果觉得文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~

react-native 封装视频播放器（react-native-video）相关推荐

html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
专业音视频播放器：Elmedia Video Player Pro mac中文版
为大家推荐一款超级好用的苹果专用视频播放器,Elmedia Video Player Pro for Mac几乎支持所有的音视频格式,具备修改播放.流式传输.画中画.流传输视频到其他设备.彩色主题.观 ...
关于Unity视频播放器插件 AVPro Video（二）3D物体上视频播放
1.官网下载该插件或者我分享的链接: 链接:https://pan.baidu.com/s/1boGeJ8r 密码:mvbf 2.新建项目创建主要控制物体 3.创建对于视频播放在3D物体身上的材质 4 ...
05.视频播放器内核切换封装
05.视频播放器内核切换封装目录介绍 01.视频播放器内核封装需求 02.播放器内核架构图 03.如何兼容不同内核播放器 04.看一下ijk的内核实现类 05.看一下exo的内核实现类 06.如何创 ...
video标签学习 xgplayer视频播放器分段播放mp4
文章目录学习链接目标 video标签自带视频和制作的视频区别 video标签的src属性本地视频文件前端代码播放效果服务器视频文件示例1 后端代码前端代码播放效果示例2 后端代码 ...
完整视频播放器封装库
2019独角兽企业重金招聘Python工程师标准>>> 目录介绍 1.关于此视频封装库介绍 1.1 能够满足那些业务需求 1.2 对比同类型的库有哪些优势 2.关于使用方法说明 2. ...
完整视频播放器封装库，仿优酷
目录介绍 1.关于此视频封装库介绍 1.1 能够满足那些业务需求 1.2 对比同类型的库有哪些优势 2.关于使用方法说明 2.1 关于gradle引用说明 2.2 添加布局 2.3 最简单的视频播放器 ...
完整视频播放器封装库 1
目录介绍 1.关于此视频封装库介绍 1.1 能够满足那些业务需求 1.2 对比同类型的库有哪些优势 2.关于使用方法说明 2.1 关于gradle引用说明 2.2 添加布局 2.3 最简单的视频播放器 ...
video.js视频播放器进度条标记的功能实现
video.js视频播放器的使用 video.js视频播放器安装引入使用 video.js视频播放器接到个需求,需要一个视频播放页面,并且进度条需要在某个时间点打上标记.在网上找了一下,发现 ...

react-native 封装视频播放器（react-native-video）

目录

前言

react-native-orientation-locker

react-native-video

全屏实现方案（可参考）

尾言

react-native 封装视频播放器（react-native-video）相关推荐

最新文章

热门文章