前言
在移动端开发中,视频播放是一项非常重要的产品功能之一,而例如直播等场景下,更需要视频的高效流畅播放。而在 React Native 开发中,控制视频播放的库也比较多,而其中 pili-engineering/Pili-SDK-ReactNative 是一款基于七牛云的开源 React Native 视频播放器。但是,由于该库在 iOS 端存在音画不同步的问题,因此笔者在学习该库使用的过程中发现了一个早期的修复库 ceair-reactnative/react-native-pili-fix。
本文将详细介绍如何使用这个修复库,在后面的使用过程中也会讲述这个修复库的原理和好处。
安装与引用
下面我们来看看如何安装该库。
npm install react-native-pili-fix --save
同时,在 Podfile
中也需要做相应的更改:
pod 'PLPlayerKit-No-Debug', '~> 3.3'
接着,在项目中引用此库:
import PLMediaPlayerView from 'react-native-pili-fix';
使用示例
使用该库和原版 Pili-SDK-ReactNative
的使用方式类似,其中最常用的两个组件是 PLMediaPlayerView
和 PLCameraStreamingView
。接下来以 PLMediaPlayerView
为例,讲解如何使用此库进行开发。
-- -------------------- ---- ------- ------ ----------------- ---- ------------------------ ------ ------ - --------- - ---- -------- ------ - ----------- ----- ---- - ---- --------------- ------ ------- ----- --- ------- --------- - -------- - ------ - ----- ------------------------- ----- --------------------------------------------- ----- -------------------------- ------------------ -------------------------- --------- ---- ------------------------------------------------------------------ -- -- ------- ------- -- - - ----- ------ - ------------------- ---------- - ----- -- ----------- --------- --------------- --------- -- ------ - --------- --- ------------- --- ----------- ------- -- ----------- - ------- ---- ------ ---- -- ------------ - ----- -- -- ---
这里仅仅是一个最简单的播放器示例,你可以继续通过 Pili-SDK-ReactNative
提供的各种属性和方法进行开发。
修复原理
在 ceair-reactnative/react-native-pili-fix 的仓库中,作者提到了该库的原理,即其替换了原版 Pili-SDK-ReactNative
的 PlayerManager
类,这个类主要负责视频播放相关的一些底层操作。
-- -------------------- ---- ------- --------------- ------------------ - ------------------ - -- ----- - ------ ------ - ------- - ---------- ------ -------------------- ---------------- - ----- ----------------------------- - ---- ------------------------------- - -- --------------------- - -------------------------- -------- ------------------------- -------- --------------- - ------ ----- - ------- ---- - ---------------- - --------------------- -------- -------- ------------------------------------- - -- -------------- -- -------------- ------------------------------------------------------ - -------------- ----------------------------- - - - --------------------- -------- -------- -------------------------- ------- ------- - -- -------------- -- -------------- ------------------------------------------------------- - -------------- ------------------------------ - - - --------------------- -------- -------- ---------------------------------------------------- - -- -------------- -- -------------- -------------------------------------------------- - -------------- ----------------------------------- - - ----
如你所见,在原版 Pili-SDK-ReactNative
中,这个类简单地添加了 delegate
、bufferingEnabled
等一些原生 API 的使用。而在修复版中,这个类多了一个 player:currentTime:reason:
方法。这个方法的实现如下:
-- -------------------- ---- ------- - --------------------- -------- -------- -------------------------------- --------------------------------------------- - -- --------------- -- ------ -- -------------------------------------------------------------- - -- ---------- -- - -- -------------- - ----- - ---- - ------------- -- ----- --- --------- ---- ----- ----------- -------------- -------------------------------------------- ------- ------- ------- ------ ------- - --------- - ----- - ---- - --------- - -- - -- -------------- -- -------------- ---------------------------------------------------------- - -------------- ------------- ---------------- --------------- - -
这个方法的作用就是判断 iOS 版本号是否为 8,如果是则强制定时发送一次左耳声音数据。在运行时里,这个类就可以重新拦截和处理底层操作。
好处与指导意义
在漫长的开发过程中,我们难免会遇到各种奇奇怪怪的问题,而解决这些问题的过程,也常常可以带给我们一些启示。因此,在这里,我们总结一下使用这个修复库的好处和应该引以为戒的地方。
首先,这个库解决了原版 Pili-SDK-ReactNative
在 iOS 端存在的音画不同步问题,因此具有一定的参考和借鉴意义。
其次,这个库虽然是早期的修复方案,但通过阅读其源码,我们也可以学到很多关于 iOS 应用开发的技巧和套路,例如面向对象的编程思想、调试工具的使用、开源类库的使用和拓展、安装、引用和调试库的方式等等。
最后,我们也应该引以为戒,这个库的实现方式比较危险,特别是加入了判断 iOS 版本的操作,在更新版 iOS 等情况下可能存在失效的风险。因此,在开发过程中应引以为戒,同时也应该积极寻找更好的解决方案,并及时优化和迭代原代码。
结语
Pili-SDK-ReactNative 是一个成熟的开源视频播放管理库,但在使用时可能存在一些问题。而 ceair-reactnative/react-native-pili-fix 就是一个早期的解决方案。在使用过程中,我们要始终牢记学习和实践的经验,同时也考虑我们的代码运用等一系列因素。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600559e181e8991b448d76eb