React Native与Flutter App开发中的视频播放

一、React Native与Flutter App开发中的视频播放

一、React Native App开发视频播放功能采用的组件

在React Native App开发中实现视频播放功能，需考虑全屏模式、APP最小化时恢复播放等功能。React-Native-Video组件在React Native中用于实现视频播放，其自带的API满足基本需求。该组件通过使用video标签并扩展方法，结合设备（Android、iOS或Windows）播放器，实现视频播放。iOS视频播放使用uiWebview和wkWebview，其中wkWebview自带AirPlay功能，可直接连接电视。在Android上，使用Native.js调用系统播放器播放视频，但视频状态无法回传给js层。

二、Flutter APP开发采用的视频播放器

Flutter没有自带视频播放器，需使用第三方插件，如VideoPlayer或fijkplayer。VideoPlayer较为简单，可快速封装自定义视频播放功能。此外，Android端开源播放器有饺子视频播放器、GSYVideoPlayer、DKPlayer等。Firebase Cloud Storage托管视频，提供安全、经济且易于使用的对象存储服务，适合大规模应用。结合Amazon S3和CloudFront托管视频，实现安全且可扩展的点播观看。

三、添加链接代码调用设备播放器播放视频

开发者可通过添加链接代码，调用设备（Android、iOS或Windows）播放器播放视频。国外健身类APP普遍采用YouTube作为视频播放器，Vimeo也是值得考虑的平台。Vimeo为用户上传、分享、储存视频提供服务，支持高清内容上传，无片长限制，适合中国用户。

Vimeo提供工具帮助分享知识，将影响力扩展到课堂之外，为社区建立联系。Vimeo Record允许录制屏幕、网络摄像头或两者，以个人风格传递知识。与Final Cut Pro、Adobe、Dropbox等创意工具集成，提供强大安全控制，允许指定访问权限，隐藏视频、使用密码锁定，限制网站嵌入视频。

Vimeo支持在线免费托管视频，提供定制播放器、隐私设置控制，确保视频仅限合适用户观看。Vimeo的免费存储空间、无广告政策，以及可定制播放器功能，提供灵活且安全的视频托管解决方案。

视频分享网站排名：10. OpenMyVideo、9. Facebook、8. Tubemogul、7. Posterous、6. Veoh、5.未知URL、4. Qik、3. Ustream、2. Vimeo、1. YouTube。

二、uniapp与flutter,跨平台解决方案你该如何选择

1、在毕设开发中，我体验了uniapp和flutter这两款跨平台框架。它们都展现了各自领域的卓越性能和兼容性，但对于选择哪一款，我们需要深入了解它们的特性。

2、uniapp起源于h5应用，通过html和小程序的发展路径，利用js调用原生接口来提升体验。早期的h5套壳技术存在许多问题，如性能瓶颈和跨平台兼容性问题。小程序的出现，通过屏蔽dom和规范，实现了优化后的h5应用体验。uniapp结合了vue和小程序思路，提供了跨小程序的解决方案，但其强跨平台的体验并不理想，对于复杂功能支持不足。

3、Flutter则采用了与h5截然不同的技术栈，利用dart和Skia图形库，提供了流畅的60fps渲染和丰富的平台通信能力。对于需求复杂的应用，Flutter更适合单独维护，尤其在需要横屏适配和高性能渲染时，material design使其接近桌面体验。Flutter的社区活跃度高，Google的强大支持使其前景看好。

4、在选型时，首先要考虑你的需求。如果项目需求较为简单，小程序如点餐，uniapp可能更为合适。如果需求复杂，uniapp适合小程序多端，而app端则可选h5或Flutter。学习成本上，uniapp的vue对前端背景的开发者更友好，而Flutter的Dart对后端背景者相对容易上手。社区活跃度方面，Flutter的优势明显，而uniapp的社区反馈和资源更新需要关注。

三、跨平台技术;H5和Flutter谁是未来

同一个应用，各个“端”独立开发，不仅开发周期长，而且人员成本高。同时，作为技术人员，也不应该满足于这种重复、低能的工作状态。在这样的形势下，跨平台的技术方案也受到越来越多人和企业的关注。

本篇文章我将从原理、优缺点等方面为大家分享跨平台技术

说到跨平台，没人不知道H5。不管是在Mac、Windows、Linux、iOS、Android还是其他平台，只要给一个浏览器，连“月球”上它都能跑。

下面，我们来看看让H5如此横行霸道的浏览器的架构：

浏览器由以上7个部分组成，而“渲染引擎”是性能优化的重中之重，一起了解其中的渲染原理。

不同的浏览器内核不同，渲染过程会不太一样，但主要流程还是一致的。

从以上6步，我们可以总结渲染优化的要点：

以上就是浏览器端的内容。但H5作为跨平台技术的载体，是如何与不同平台的App进行交互的呢？这时候JSBridge就该出场了。

JSBridge，顾名思义，是JS和Native之间的桥梁，用来进行JS和Native之间的通信。

那么App内加载H5的过程是什么样的呢？

这四步，对应的过程如上图所以，我们可以针对性的做性能优化。

下面，我们进行H5的优缺点分析：

虽然H5目前还存在不足，但随着PWA、WebAssembly等技术的进步，相信H5在未来能够得到越来也好的发展。

2018年是微信小程序飞速发展的一年，19年，各大厂商快速跟进，已经有了很大的影响力。下面，我们以微信小程序为例，分析小程序的技术架构。

小程序跟H5一样，也是基于Webview实现。但它包含View视图层、App Service逻辑层两部分，分别独立运行在各自的WebView线程中。

可以理解为h5的页面，提供UI渲染。由WAWebview.js来提供底层的功能,具体如下：

每个窗口都有一个独立的WebView进程，因此微信限制不能打开超过5个层级的页面来保障用户体验。

提供逻辑处理、数据请求、接口调用。由WAService.js来提供底层的功能,具体如下：

视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层将触发的事件通知到逻辑层进行业务处理。

既然WebView性能不佳，那有没有更好的方案呢？下面我们看看React Native。

RN的理念是在不同平台上编写基于React的代码，实现Learn once, write anywhere。

Virtual DOM在内存中，可以通过不同的渲染引擎生成不同平台下的UI，JS和Native之间通过Bridge通信

在 React框架中，JSX源码通过 React框架最终渲染到了浏览器的真实 DOM中，而在 React Native框架中，JSX源码通过 React Native框架编译后，与Native原生的UI组件进行映射，用原生代替DOM元素来渲染，在UI渲染上非常接近Native App。

2.React Native与Native平台通信

虽然RN还存在不足，但RN新版本已经做了如下改进，并且RN团队也在积极准备大版本重构，能否成为开发者们所信赖的跨平台方案，让我们拭目以待。

既然React Native在渲染方面还摆脱不了原生，那有没有一种方案是直接操控GPU，自制引擎渲染呢，我们终于迎来了Flutter！

Flutter是Google开发的一套全新的跨平台、开源UI框架，支持iOS、Android系统开发，并且是未来新操作系统Fuchsia的默认开发套件。渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性，逻辑处理使用支持AOT的Dart语言，执行效率也比JavaScript高得多。

很多人会好奇，为什么Flutter要用Dart，而不是用JavaScript开发，这里列下Dart的优势