iOS--React Native視訊播放器外掛

FBY展菲發表於2019-02-25
iOSReact 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展菲

歡迎關注我的公眾號：網羅開發

iOS--React Native視訊播放器外掛

相關文章