iOS--React Native视频播放器插件

一：介绍

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，相似于HTML的JSX，以及CSS来开发移动应用，所以熟悉Web前端开发的技术人员只需不多的学习就能够进入移动应用开发领域。

在React Native移动平台项目开发中，除了React Native 提供的封装好的部分插件和原声组建外，在实际的项目中还须要使用到不少其余的插件，好比网络请求、数据库、相机、相册、通信录、视频播放器、浏览器、蓝牙链接、图片处理、消息推送、地图、统计、埋点等等APP开发中须要用到的功能，都为IDE开发平台提供封装好的插件，以便项目开发使用。

另外，这些博文都是来源于我平常开发中的技术总结，在时间容许的状况下，我会针对技术点分别分享iOS、Android两个版本，若是有其余技术点须要，可在文章后留言，我会尽全力帮助你们。这篇文章重点介绍原生视频播放器插件的开发与使用。

源码Demo获取方法

若是须要React Native视频播放器插件源码demo，欢迎关注 【网罗开发】微信公众号，回复【63】即可领取。 网罗天下方法，方便你我开发，全部文档会持续更新，欢迎关注一块儿成长！

二：实现思路分析

原生视频播放器插件是须要实现打开js端调用播放方法传入的视频连接URL，具体的实现思路以下：

1. 新建mediaPlay类，实现RCTBridgeModule协议

2. 添加RCT_EXPORT_MODULE()宏

3. 添加React Native跟控制器

4. 声明被JavaScript 调用的方法

5. 建立一个视频播放控制器

6. 建立一个视频播放图层

7. 将视频播放图层添加到父控件图层

8. JavaScript调用浏览器方法

三：实现源码分析

1. 新建mediaPlay类，实现RCTBridgeModule协议

新建继承NSObject的mediaPlay类，并实现RCTBridgeModule协议

// mediaPlay.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <UIKit/UIKit.h>
@interface mediaPlay : NSObject<RCTBridgeModule>
@end
复制代码

2. 添加RCT_EXPORT_MODULE()宏

为了实现RCTBridgeModule协议，mediaPlay的类须要包含RCT_EXPORT_MODULE()宏。 并在这个宏里面添加一个参数“MediaPlay”用来指定在 JavaScript 中访问这个模块的名字。 若是你不指定，默认就会使用这个 Objective-C 类的名字。 若是类名以 RCT 开头，则 JavaScript 端引入的模块名会自动移除这个前缀。

// mediaPlay.m
#import "mediaPlay.h"
@implementation mediaPlay
RCT_EXPORT_MODULE(MediaPlay);
@end
复制代码

3. 添加React Native跟控制器

若是不添加React Native跟控制器，view将不能正常显示出来，实现方法以下：

// mediaPlay.m
#import "mediaPlay.h"
#import <React/RCTUtils.h>
@implementation mediaPlay
RCT_EXPORT_MODULE(MediaPlay);
@end
复制代码

引入<React/RCTUtils.h>以后，在视图初始化或者显示的时候，按照以下方法调用便可

UIViewController *vc = RCTPresentedViewController();
复制代码

4. 声明被JavaScript 调用的方法

React Native须要明确的声明要给 JavaScript 导出的方法，不然 React Native 不会导出任何方法。声明经过RCT_EXPORT_METHOD()宏来实现：

// mediaPlay.m
#import "mediaPlay.h"
#import <React/RCTUtils.h>
@implementation mediaPlay
RCT_EXPORT_MODULE(MediaPlay);
RCT_EXPORT_METHOD(mediaPlayer:(NSDictionary*)arguments
                           :(RCTResponseSenderBlock)sucessCallback
                           :(RCTResponseSenderBlock)failCallback)
{
    NSLog(@"调起原声视频播放器的方法");
}
@end
复制代码

5. 建立一个视频播放控制器

视频播放器是使用iOS原声<AVFoundation/AVFoundation.h>来实现视频的播放，建立一个视频播放控制器代码以下：

-(AVPlayerViewController *)playerVC
{
    if (_playerVC == nil)
    {
        //建立一个视频播放控制器
        _playerVC = [[AVPlayerViewController alloc] init];
        //获取视频URL（远程、本地视频URL均可以）
        NSURL * url = [NSURL URLWithString:self.vedioURL];
        //根据URL建立播放曲目
        AVPlayerItem * item = [AVPlayerItem playerItemWithURL:url];
        //建立一个视频播放器
        AVPlayer * player = [AVPlayer playerWithPlayerItem:item];
    }
    return _playerVC;
}
复制代码

6. 建立一个视频播放图层

//建立一个视频播放图层
        AVPlayerLayer * playLayer = [AVPlayerLayer playerLayerWithPlayer:player];
复制代码

7. 将视频播放图层添加到父控件图层

//将视频播放图层添加到父控件图层
        [_playerVC.view.layer addSublayer:playLayer];
        //设置视频播放控制器的播放器为player
        _playerVC.player = player;
复制代码

8. Javascript调用浏览器方法

如今从 Javascript 里能够这样调用这个方法：

import { NativeModules } from "react-native";
const MediaPlayPlugin = NativeModules.MediaPlay;
MediaPlayPlugin.mediaPlayer({filePath:"http://static.tripbe.com/videofiles/20121214/9533522808.f4v.mp4"},(msg) => {
                                         Alert.alert(JSON.stringify(msg));
                                         },(err) => {
                                         Alert.alert(JSON.stringify(err));
                                         });
复制代码

但愿能够帮助你们，若有问题可加QQ技术交流群: 668562416

若是哪里有什么不对或者不足的地方，还望读者多多提意见或建议

如需转载请联系我，通过受权方可转载，谢谢

本篇已同步到我的博客：FBY展菲

---

欢迎关注个人公众号：网罗开发