使用 react-native-video 将视频添加到 React Native APP

在 React Native 应用程序中使用本地和基于 URL 的视频


照片由多诺万·席尔瓦Unsplash上提供

开始

你需要做的第一件事是在系统的任何位置创建一个文件夹(我喜欢使用下载或桌面文件夹),创建一个名为 的文件夹 rnvideoproject

完成此操作后,打开终端/命令提示符并导航到你刚创建完的文件夹。完成此操作后,输入命令 react-native init rnvideoproject

这将开始创建 React Native 项目和所有必要的文件/文件夹。完成后(可能需要几分钟)在你喜欢的代码编辑器中打开该文件夹。我总是使用Visual Studio Code。完成此操作后,在 Visual Studio Code 中打开终端并确保你位于文件夹的根目录位置。确定之后,输入以下命令。

react native run ios 

随即会打开一个模拟 iOS 手机,它将展示我们的 React Native 项目。

接下来要安装包 react-native-video。

npm install --save react-native-video

react-native-video 基本上是一个允许在 React Native 中显示/使用视频组件的包。它提供了各种功能,例如能够将视频静音、仅播放音频而不播放视频,以及在屏幕前显示通知时暂停或播放视频。

下一步是在代码编辑器终端中运行以下命令:

cd ios && pod install

这将为 react-native-video 包安装必要的 pod 依赖项。

下一步,打开文件 App.js 并将 constclass APP替换为以下内容。

ass App extends React.Component{


render(){
return(
<View style={{alignItems: 'center',flex:1,justifyContent: 'center'}}>
<Text>My video project!</Text>
</View>
)
}
}

现在你的APP看起来应如下所示:

1_1II4Crfu1h7ywfMC_8loAA

远程视频地址

下一步是从 react-native-video 包中导入视频组件。为此,在 App.js 文件中导入其余组件的位置输入以下代码:

1_ry_WmCZ-Ty5Mt3i-hgFCXQ

import Video from ‘react-native-video’

对于视频组件,有一些非常重要的属性。以下是在 React Native 模拟器上正确显示的视频组件示例。

ideo
source={{ uri: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4?_=1' }}
style={{ width: 300, height: 300 }}
controls={true}
ref={(ref) => {
this.player = ref
}} />

因此,我们已将该 source 属性设置为与来自网站(一个非常可爱的动画兔子,如果我可以这样说的话)的示例 mp4 文件同等。

我们将视频组件的宽度和高度各设置为 300。

controls 属性是 true ,这意味着,如果发起暂停和全屏幕视频的控制,这都是对用户可见的。默认情况下,这是 true . 如果我们将该属性设置为 false ,则不会向用户显示控件。

1_q0PcFu5bu99HZMRJ1sAGsg

还有一个名为 audioOnly 的属性,当设置为 true 时,它只会播放音轨而不是视频轨道。但是,为了保证这种情况顺利进行,还必须设置视频组件的 poster 属性。该 poster 属性是一个字符串,表示在播放音频而视频未播放时应显示的图像。如果未设置 poster 属性, audioOnly 将起不了作用。

以下是如何使用该 audioOnly 属性的示例:

ideo
source={{ uri: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4?_=1' }}
style={{ width: 300, height: 300 }}
controls={true}
audioOnly={true}
poster="https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/English_Cocker_Spaniel_4.jpg/800px-English_Cocker_Spaniel_4.jpg"
ref={(ref) => {
this.player = ref
}} />

我已经将 audioOnly 设置成 true 并将 poster 属性设置为一个可卡犬的图像。
1_wgsSkuN5PyzMf2o_VlHwDQ

还有一些其他很酷的属性,例如 pausedmuted ,它们可以将设置为 true 的视频暂停或静音。

一个重要的属性是 ref ,它基本上存储了视频组件的引用,因此你可以在没有 props/state 的情况下更改视频组件。

你可以使用以下代码作为如何执行此操作的参考:

ideo
source={{ uri: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4?_=1' }}
style={{ width: 300, height: 300 }}
controls={true}
ref={(ref) => {
this.player = ref
}} />

onBuffer 是在视频缓冲时运行的属性。你可以将此属性设置为在视频缓冲时向用户执行/显示某些内容的函数。例如,你可能在想要显示的远程 URL 上有一个大型视频,这可能需要一段时间来缓冲。你可以将此值传递给状态,如果 onBuffer 值为 true ,则会向用户显示加载图标。在这种情况下,这会变得很方便。

以上是如何使用 onBuffer 的示例。你只需要传入函数名称,参数将包含从 onBuffer 返回的对象,该对象包含一个 isBuffering 和一个 target 属性。

本地视频文件

下面我将展示如何使用 react-native-video 添加本地视频文件以在你的 React Native APP上显示。我们将使用以下 URL 中的 mp4 文件。

https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4
打开上面的 URL 后,单击视频右侧的三个点,然后单击下载。

下载文件后,将视频复制到项目文件夹的根目录。你现在需要创建一个变量,这需要 render 方法中的 mp4 文件。

image

从上面可以看出,我们将文件命名为 earth.mp4 并将Video 组件的源设置为等于变量 earthVideo 。现在视频看起来具体如下,而没有显示动画兔子。

1_0NdmRmHvRTIzGLw-5jR7RA

文章有些简短,但我只想了解使用 Video 组件的基础知识和一些最重要的属性。尽管如此,仍然有大量其他非常有用的属性/事件,我将在下面注明供大家参考。

pictureInPicture ( true / false )— 这决定了视频是否应该作为画中画播放。(根据文档的建议,这仅适用于 iOS。)

playWhenInactive ( true / false )——这决定了当通知中心在视频前面时是否播放视频。(根据文档建议,这仅适用于 iOS。)

rate — (0.0–1.0)视频播放速度。(0.0 暂停视频,1.0 以正常速度播放视频)。所有平台。

source — 要播放的媒 体来源。这可以来自本地文件、远程 URL 或 SD 卡中的文件。所有平台。

onLoad — 当媒体可以播放时运行的事件属性/回调函数。

onEnd — 媒体 播放结束时运行的回调函数。

react-native-video 是一个很棒的包,它有大量的属性、回调函数以及这些回调函数的属性,如果你想在你的 React 中使用视频,这绝对是一个可以检查和使用(和支持)的包本机APP。

我希望这篇文章能对你有所帮助。

原文作者 Alex
原文链接https://betterprogramming.pub/add-video-to-your-react-native-app-using-react-native-video-f020e90059de

推荐阅读
作者信息
AgoraTechnicalTeam
TA 暂未填写个人简介
文章
148
相关专栏
精选文章
102 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和 Agora 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。