搜索
您的当前位置:首页react-native-video实现视频全屏播放的方法

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

时间:2023-11-30 来源:乐玩宠
这篇文章主要介绍了react-native-video实现视频全屏播放的方法,现在分享给大家,也给大家做个参考。

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 ,注意不要选错。

视频播放

实现视频播放其实很简单,我们只需要给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在屏幕旋转以后撤销转屏限制。

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

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

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Angular学习笔记之集成三方UI框架、控件的示例

Node.js实现注册邮箱激活功能的方法示例

Webpack 之 babel-loader文件预处理器详解

小编还为您整理了以下内容,可能对您也有帮助:

react-native-video解决安卓无法全屏

安卓默认不支持全屏,如果需要全屏,需要使用这个PR

https://github.com/react-native-video/react-native-video/pull/2073

具体用法:

手动Link android/settings.gradle(如果直接使用默认播放器则无需手动,如果需要使用ExoPlayer 则不管是不是0.60之上都需要手动连接,默认播放器无法全屏,也没有全屏按钮)

android/app/build.gradle引入react-native-video

如果成功使用ExoPlayer ,样子应该是这个样子的:

React-Native全面屏适配

react-native 提供了一个 SafeAreaView 组件可以实现全面屏的适配,但只是针对于IOS端有效,Android端无效。为了实现两平台的统一,我又封装了一个带 Header 头部导航栏的高级版 SafeAreaView ,可通过下方命令安装。

有如下属性可以设置

两个点击事件

使用示例

video适配android和ios全屏显示设置的属性

效果要求 :按住按钮视频全屏播放,松开暂停;

iOS;

<video id="video" style=" object-fit: fill" preload="auto"  x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="h5" x5-video-player-fullscreen="true" preload="auto" width=100%; height=100%;  src="图片地址"> </video>

效果预览

android

<video id="video2" style=" object-fit: fill" preload="auto" autoplay="autoplay" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait"  width=100%; height=100%; src="图片地址">  </video>

Android上不能像苹果一样在浏览器里内嵌播放视频,会加载一个视频播放器全屏播放;

效果预览

相关属性介绍 点击这里

object-fit介绍 点击这里

RN-第三方组件之react-native-video播放音视频

react-native-video,RN上面的播放器

官网介绍: https://www.npmjs.com/package/react-native-video

安装

使用:

iOS:

AppDelegate.m

Android:

配置完成,接下来就是使用了,使用也很简单:

另外 还有两个方法提供使用,貌似只支持iOS

demo: https://github.com/chjwrr/ThirdPartyToolTest

乐玩宠还为您提供以下相关内容希望对您有帮助:

react-native-video解决安卓无法全屏

安卓默认不支持全屏,如果需要全屏,需要使用这个PR https://github.com/react-native-video/react-native-video/pull/2073 具体用法:手动Link android/settings.gradle(如果直接使用默认播放器则无需手动,如果需要使用ExoPlayer...

RN-第三方组件之react-native-video播放音视频

react-native-video,RN上面的播放器 官网介绍: https://www.npmjs.com/package/react-native-video 安装 使用:iOS:AppDelegate.m Android:配置完成,接下来就是使用了,使用也很简单:另外 还有两个方法提供使用,貌似...

video适配android和ios全屏显示设置的属性

效果要求 :按住按钮视频全屏播放,松开暂停;iOS;&lt;video id="video" style=" object-fit: fill" preload="auto"  x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-orientatio...

视频怎么全屏 快速掌握视频全屏播放技巧?

1. 按下键盘上的“F”键。以上就是视频全屏播放的几种常见方法。在观看视频时,我们可以根据自己的喜好和操作习惯来选择适合自己的方法。希望以上内容能够帮助大家更好地享受视频内容。有时候,我们在观看视频时,视频可能会...

怎么将网页中不支持全屏播放的视频以全屏模式打开

具体如下:1.第一步,在视频播放页面查看右下角是否有全屏播放按钮,没有的话则进行下一步。2. 第二步,通过键盘中的F12打开审查元素,如果F12没用的话,可以试试FN+F12。3. 第三步,点击下图箭头所指的按钮,然后...

如何实现视频全屏播放?

1. 调整视频播放设置 许多手机视频播放器都有一个“全屏”或“适应屏幕”的选项,这可以让视频自动扩大到整个屏幕。具体操作方式可能因播放器而异,但通常在播放视频时,你可以在屏幕上找到一个类似于四个箭头的图标或“全屏...

react-native-orientation 横屏实现

1.npm install react-native-orientation --save 2.react-native link react-native-orientation 简单使用 引入 import Orientation from 'react-native-orientation';1.在进去这个页面的时候强制横屏 2.在退出当前页面的时候...

视频怎么全屏播放?

如果想让电脑中的视频文件一打开就自动最大化播放,可以通过以下几种方法设置:1. 在视频播放器中设置全屏默认打开选项。以Windows Media Player为例:打开WMP - 点击"工具" - "选项" - "播放"在"播放"选项卡中,选中"...

uniapp中控制videojs视频播放器全屏以及退出全屏切换的另一种思路

1.播放器外层容器定义动态样式,播放器本身增加动画 2.定义变量记录当前是否处于全模式 3.切换全屏方法 4.页面样式控制的相关计算属性 5.部分css样式

video播放视频默认全屏还是半屏

默认全屏。一般来说视频播放都是默认的全屏。

Top
6.016647s