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

adding-videos-react-native-react-native-video

React Native可能是当今使用最广泛的混合APP框架,因为它使开发人员能够通过编写React代码来创建原生APP,使开发人员在网站和APP端提供类似的体验,使创建APP变得非常简单。

但这是否意味着你可以通过将所有 React 代码复制到 React Native APP 使网站变成APP呢?不幸的是,事情没那么简单。尽管 React Native APP的代码看起来与用 React 编写的 Web APP的代码相似,但还是存在一些关键的微小差异。

与网站和浏览器相比,移动APP具有许多原生界面和功能。虽然 React Native APP的开发适用于 iOS 或 Android 的原生APP,但一些简单元素的实现与我们在 Web 版本的 React 中看到的不同。例如,<div> 变成<view><p> 变成<text> 等等。

这使得 React Native 不同于所有基于 Cordova 的混合APP框架。但是,这听起来像是个漏洞,实际上它使APP可以编译为本机代码而不是模拟的 Web 视图。

与原生 Web 元素不同的是视频。在 HTML 和网络的世界中,观看视频就像使用原生HTML 元素<video> 一样简单。

在APP内容中,实现视频并不像在 Web 上那样容易。好消息是 React Native 社区已经针对这个问题开发了非常受欢迎的解决方案。

本文重点介绍了最常见的包 react-native-video,用于在 React Native APP中使用视频,你还将学习如何在 React Native APP中实现它。

要求

由于安装和使用可能因开发的设备而异,因此我们将重点关注 iOS 版本并在基于 Mac 的开发人员环境中为所有示例开发APP。

针对各种类型的设备或平台(例如,Android)开发步骤是相似的,需要注意的事项在软件包的文档中已经进行了详细描述。

什么是 react-native-video?

在撰写本文时,使用最广泛的包——react-native-video仍无可替代。

虽然我很喜欢比较不同的包,但在这里没有意义,所以我们只强调库的用法、优点和缺点,然后学习如何使用它。react-native-video 包大小为 500kB,可以在 React Native 领域的所有设备上使用。

安装包

在使用库之前,你必须在项目的根目录中安装包:

npm install --save react-native-video

如果你在 Mac 上运行原生 React APP,你还需运行以下命令:

npx pod-install

其他环境和应用环境可参考平台官方安装指南

使用 react-native-video

在我解释如何使用这个包之前,让我们从一个想要用它实现的例子开始。APP视频的一个常见用例是动态背景,这是我们希望在登录APP时屏幕显示的效果。

具体如下:

首先,我们将库中的视频组件导入到我们想要显示视频的组件中。

当然,要让视频组件显示所有内容,我们需要一个视频文件。这可以是项目中的文件,也可以是指向外部资源的链接。

现在,进行各项组合:

import Video from 'react-native-video';
import video from '../test-video.mp4';

const MyComponent = () => {
    return (
        <Video  
            source={video}                  // the video file
            paused={false}                  // make it start    
            style={styles.backgroundVideo}  // any style you want
            repeat={true}                   // make it a loop
        />
    )
}

如你所见,我们已将项目中导入的视频文件直接传递给组件。如果你更喜欢外部视频文件的链接,你还可以使用 source 属性,如下所示:

<Video  
    source={{ url: 'http://link-to-your-video.mp4'}}
    ...
/>

为了实现背景视频的外观,我们还向组件传递了一些 React Native 样式。此外,我们将 prop pause 设置为false ,它告诉组件立即开始播放视频。我们还将道具proprepeat 设置为true ,使视频循环。

在 react-native-video 中使用的其他组件道具

我们只使用了组件的四个 props,很快就实现了我们的用例。但是,还有更多使用道具的方法。你可以查看文档以浏览完整列表,但我想给你推荐一些我认为非常有用的方法。

allowsExternalPlayback

此道具允许视频由外部资源控制,例如 AirPlay 或 HDMI,但这仅在 iOS 上可用。

playInBackground

使用此选项可指定在APP关闭时是否继续播放视频。当然,只有音频会继续播放,但对于某些情况,即使APP已关闭,但仍能保持视频播放。

poster

这个道具创建了一个在视频加载或尚未开始时显示的图像,例如通常在 YouTube 上看到的缩略图。此外,你可以使用posterResizeMode 调整图像。

controls

在上面的示例中,我们不想显示视频的控件,因为它只是在后台运行,这是组件的默认行为。如果要允许用户控制视频,只需将controls 设置为true ,控件将自动显示。

注意:在 iOS 上,即使此标志设置为 false,控件也会以全屏模式显示。

创建外部视频控件

该组件还提供了从外部控制视频所需的一切,因此可以创建自己独特的用户界面来控制它。

paused , muted , volume , onprogress , 或者rate 之类的属性是你可以使用 React 状态自定义的道具,并且你可以让其他任何元素控制它们。以下是一个简短示例:

function Home(props) {  
    const [isPlaying, setIsPlaying] = React.useState(false);  
    const [isMuted, setIsMuted] = React.useState(false);  

    const togglePlaying = () => {};  

    return (  
        <View>  
            <Video
                source={video}  
                paused={!isPlaying}  
                controls={true}  
                style={styles.backgroundVideo}  
                muted={isMuted}  
            />  
            <Button
                onPress={() => setIsPlaying(p => !p)}  
                title={isPlaying ? 'Stop' : 'Play'}  
            />  
            <Button
                onPress={() => setIsMuted(m => !m)}  
                title={isMuted ? 'Unmute' : 'Mute'}  
            />  
        </View> 
    );  
}

如你所见,通过简单的状态和使用按钮,我们可以按照我们想要的方式控制视频,这使我们能够拥有自定义视频UI的能力。

在视频元素中调用方法

你还可以调用一些视频元素中的方法来对其进行更多控制,例如使用save 将视频保存到设备照片或控制视频的全屏模式等操作。

为此,你需要创建videoPlayer 引用并为存储在示例为useRef 中:

import Video from 'react-native-video';
import video from '../test-video.mp4';

const MyComponent = () => {
    const videoPlayer = React.useRef();

    const goFullScreen = () => {  
        if (videoPlayer.current) {  
            videoPlayer.current.presentFullscreenPlayer();  
        }  
    };

    return (
        <Video  
            ref={ref => (videoPlayer.current = ref)}
            source={video}                  // the video file
            paused={false}                  // make it start    
            style={styles.backgroundVideo}  // any style you want
            repeat={true}                   // make it a loop
        />
    )
}

结论

React Native 是一个强大的工具,因为它提供了使用 React 编写APP的可能性,这与 Web 非常相似。

唯一的区别是我们不编写 HTML 元素。但是,我们确实包含本地元素,其中一些元素已包含在框架中,还必须安装视频等元素。

尽管开发视频的操作与网络端相似,但开发人员需要考虑创建全屏模式或在APP最小化时恢复播放的选项等功能。

react-native-video 库为你提供了所有这些选项,以便你可以轻松地将视频添加到APP并对其进行自定义,确保用户在你的APP上观看视频时拥有出色的体验!

原文作者 Lorenz Weiß
原文链接 https://blog.logrocket.com/adding-videos-react-native-react-native-video/

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