iOS--React Native視頻播放器插件

時間 2019-12-12

標籤 ios react native 視頻播放插件欄目 iOS 简体版

原文原文鏈接

一：介紹

React Native (簡稱RN)是Facebook於2015年4月開源的跨平臺移動應用開發框架，是Facebook早先開源的JS框架 React 在原生移動應用平臺的衍生產物，目前支持iOS和安卓兩大平臺。RN使用Javascript語言，相似於HTML的JSX，以及CSS來開發移動應用，所以熟悉Web前端開發的技術人員只需不多的學習就能夠進入移動應用開發領域。前端

在React Native移動平臺項目開發中，除了React Native 提供的封裝好的部分插件和原聲組建外，在實際的項目中還須要使用到不少其餘的插件，好比網絡請求、數據庫、相機、相冊、通信錄、視頻播放器、瀏覽器、藍牙鏈接、圖片處理、消息推送、地圖、統計、埋點等等APP開發中須要用到的功能，都爲IDE開發平臺提供封裝好的插件，以便項目開發使用。react

另外，這些博文都是來源於我平常開發中的技術總結，在時間容許的狀況下，我會針對技術點分別分享iOS、Android兩個版本，若是有其餘技術點須要，可在文章後留言，我會盡全力幫助你們。這篇文章重點介紹原生視頻播放器插件的開發與使用。git

源碼Demo獲取方法

若是須要React Native視頻播放器插件源碼demo，歡迎關注【網羅開發】微信公衆號，回覆【63】即可領取。 網羅天下方法，方便你我開發，全部文檔會持續更新，歡迎關注一塊兒成長！github

二：實現思路分析

原生視頻播放器插件是須要實現打開js端調用播放方法傳入的視頻連接URL，具體的實現思路以下：數據庫

新建mediaPlay類，實現RCTBridgeModule協議react-native
添加RCT_EXPORT_MODULE()宏瀏覽器
添加React Native跟控制器bash
聲明被JavaScript 調用的方法微信
建立一個視頻播放控制器網絡
建立一個視頻播放圖層
將視頻播放圖層添加到父控件圖層
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));
                                         });
複製代碼