The video player based on AVPlayer encapsulation has rich functions, React Native

EZPlayer

Preview

native

 

react native

 

Introduction

The video player based on AVPlayer encapsulation has rich functions, fast integration and strong customization.

Claim

• iOS 8.0+
• Xcode 12.0+
• Swift 5.0+

characteristic

• Local video, network video playback (for supported formats, please refer to Apple AVPlayer documentation)
• Full screen mode/embedded mode/floating mode can be switched at will (support automatic rotation according to the device)
• Full screen mode supports horizontal full screen and vertical full screen
• Customized gestures: play/pause (double tap in full screen/embedded mode, single tap in floating mode), floating and full screen switching (double tap), volume/brightness adjustment (slide up and down), progress adjustment (slide left and right)
• Support airPlay
• Support UITableview to automatically manage embedding and floating mode switching
• Video Gravity switching
• Subtitle/CC switch
• Audio switching
• Drag progress display preview image (m3u8 does not support)
• Player control skin customization (a set of floating skins, a set of skins for embedding and full screen)
• Support advertising function
• Support React Native

installation

ExportFramework

Execute the ExportFramework script in the project to automatically generate the framework

Carthage

1. Create one Cartfile, list the frameworks you want to use in this file

github "easyui/EZPlayer" 

1. Run carthage update, get dependencies to Carthage/Checkouts folder, build one by one
2. Under the target->General option of the project, drag and drop the framework you want to add in the Carthage/Build folder to the “Linked Frameworks and Libraries” option. (If you don’t want to drag this operation, you can set Xcode to automatically search the Framework directory Target—>Build Setting—>Framework Search Path—>Add path “$(SRCROOT)/Carthage/Build/iOS”)
3. Under the project’s target－>Build Phases option, click the “+” button, select “New Run Script Phase”, and fill in the following:

/usr/local/bin/carthage copy-frameworks

1. And add the framework path in the “Input Files” option

$(SRCROOT)/Carthage/Build/iOS/EZPlayer.framework

CocoaPods

1. Create one Podfile, list the frameworks you want to use in this file

project 'EZPlayerExample.xcodeproj'
platform :ios, '8.0'

target '<Your Target Name>' do
  use_frameworks!
  pod 'EZPlayer' 
end

1. In Podfilethe next file directory

$ pod install

use

• Initialize the player to play

func playEmbeddedVideo(mediaItem: MediaItem, embeddedContentView contentView: UIView? = nil , userinfo: [AnyHashable : Any]? = nil ) {
        //stop
        self.releasePlayer()
......       
        self.player!.backButtonBlock = { fromDisplayMode in
            if fromDisplayMode == .embedded {
                self.releasePlayer()
            }else if fromDisplayMode == .fullscreen {
                if self.embeddedContentView == nil && self.player!.lastDisplayMode != .float{
                    self.releasePlayer()
                }

            }else if fromDisplayMode == .float {
                self.releasePlayer()
            }

        }

        self.embeddedContentView = contentView
        //self.embeddedContentView为nil时就是全屏播放
        self.player!.playWithURL(mediaItem.url! , embeddedContentView: self.embeddedContentView)
    }

• Full screen mode/embedded mode/floating mode can be switched at will (support automatic rotation according to the device)
• Full screen mode supports horizontal full screen and vertical full screen

//根据设备横置自动全屏
open var autoLandscapeFullScreenLandscape = UIDevice.current.userInterfaceIdiom == .phone
//指定全屏模式是竖屏还是横屏
open var fullScreenMode = EZPlayerFullScreenMode.landscape

//进去全屏模式
open func toFull(_ orientation:UIDeviceOrientation = .landscapeLeft, animated: Bool = true ,completion: ((Bool) -> Swift.Void)? = nil) 
//进入嵌入屏模式
open func toEmbedded(animated: Bool = true , completion: ((Bool) -> Swift.Void)? = nil)
//进入浮动模式
open func toFloat(animated: Bool = true, completion: ((Bool) -> Swift.Void)? = nil) 

Example: EZPlayerExample-DisplayMode

• Customized gestures: play/pause (double tap in full screen/embedded mode, single tap in floating mode), floating and full screen switching (double tap), volume/brightness adjustment (slide up and down), progress adjustment (slide left and right)

//自定义皮肤只要实现这两个协议
public protocol EZPlayerHorizontalPan: class {
func player(_ player: EZPlayer ,progressWillChange value: TimeInterval)
func player(_ player: EZPlayer ,progressChanging value: TimeInterval)
func player(_ player: EZPlayer ,progressDidChange value: TimeInterval)
}

public protocol EZPlayerGestureRecognizer: class {
func player(_ player: EZPlayer ,singleTapGestureTapped singleTap: UITapGestureRecognizer)
func player(_ player: EZPlayer ,doubleTapGestureTapped doubleTap: UITapGestureRecognizer)
}
//点击事件还可以接受通知
static let EZPlayerTapGestureRecognizer = Notification.Name(rawValue: "com.ezplayer.EZPlayerTapGestureRecognizer")

• Support airPlay

/// 支持airplay
open var allowsExternalPlayback = true
/// airplay连接状态
open var isExternalPlaybackActive: Bool 

• Support UITableview to automatically manage embedding and floating mode switching

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
...       MediaManager.sharedInstance.playEmbeddedVideo(url:URL.Test.localMP4_0, embeddedContentView: cell?.contentView)

//主要是设置indexPath和scrollView 属性
MediaManager.sharedInstance.player?.indexPath = indexPath
        MediaManager.sharedInstance.player?.scrollView = tableView
    }

• Video Gravity switching

//设置
open var videoGravity = EZPlayerVideoGravity.aspect

• Subtitle/CC switch
• Audio switching

主要通过下面两个extension来设置，查看
AVAsset+EZPlayer.swift
//获取所有cc
public var closedCaption: [AVMediaSelectionOption]? 
//获取所有subtitle
public var subtitles: [(subtitle: AVMediaSelectionOption,localDisplayName: String)]? 
//获取所有audio
public var audios: [(audio: AVMediaSelectionOption,localDisplayName: String)]? 

AVPlayerItem+EZPlayer.swift
/// 获取／设置当前subtitle／cc
public var selectedMediaCharacteristicLegibleOption:AVMediaSelectionOption?
/// 获取／设置当前cc
public var selectedClosedCaptionOption:AVMediaSelectionOption?
/// 获取／设置当前subtitle
public var selectedSubtitleOption:AVMediaSelectionOption?
/// 获取／设置当前audio
public var selectedMediaCharacteristicAudibleOption:AVMediaSelectionOption?

• Drag progress display preview image (m3u8 does not support)

//不支持m3u8
open func generateThumbnails(times: [TimeInterval],maximumSize: CGSize, completionHandler: @escaping (([EZPlayerThumbnail]) -> Swift.Void ))
//支持m3u8
func snapshotImage() -> UIImage?

• Player control skin customization (a set of floating skins, a set of skins for embedding and full screen)

• There are three sets of skins for EZPlayer:

 /// 嵌入模式的控制皮肤
open  var controlViewForEmbedded : UIView?
/// 浮动模式的控制皮肤
open  var controlViewForFloat : UIView?
/// 浮动模式的控制皮肤
open  var controlViewForFullscreen : UIView?

• When the default controlViewForFullscreen is empty, the controlViewForEmbedded skin will be used by default

• You can set the controlViewForEmbedded skin when EZPlayer is initialized

public init(controlView: UIView? )

Example: EZPlayerExample-Skin(ad)

• Support advertising function

If you enter an advertisement during playback, you need to temporarily set the advertisement skin, and you can set the attributes:

open  var controlViewForIntercept : UIView?

Example: EZPlayerExample-Skin(ad)

• Support React Native

You can refer to the EZPlayerExample_RN project to use the latest swift4and latest react nativeversion to encapsulate EZPlayer to realize most of the functions of EZPlayer.

react-native-ezplayer 文件：

EZRNPlayerView.swift: encapsulation of EZPlayer, docking with javascript

EZRNPlayerViewManager.swift: EZPlayer component manager

EZRNPlayerViewBridge.h & EZRNPlayerViewBridge.m ： oc桥接

EZPlayer.js: js api encapsulated for EZPlayer

Attribute

key	description	value
source	Video data source	PropTypes.object
autoPlay	Play automatically after setting the data source	PropTypes.bool
useDefaultUI	Use EZPlayer’s own skin	PropTypes.bool
videoGravity	Video aspect ratio	PropTypes.string(aspect,aspectFill,scaleFill)
fullScreenMode	Is the full screen mode vertical or horizontal	PropTypes.string(portrait,landscape)
onPlayerHeartbeat	Player declaration cycle heartbeat	PropTypes.func
onPlayerPlaybackTimeDidChange	trigger of addPeriodicTimeObserver method	PropTypes.func
onPlayerStatusDidChange	Player status change	PropTypes.func
onPlayerPlaybackDidFinish	End of video	PropTypes.func
onPlayerLoadingDidChange	loading status change	PropTypes.func
onPlayerControlsHiddenDidChange	The player control bar is hidden and displayed	PropTypes.func
onPlayerDisplayModeDidChange	The player display mode has changed (full screen, embedded screen, floating)	PropTypes.object
onPlayerDisplayModeChangedWillAppear	Player display mode animation start	PropTypes.func
onPlayerDisplayModeChangedDidAppear	Player display mode animation ends	PropTypes.func
onPlayerTapGestureRecognizer	Tap player gesture notification	PropTypes.func
onPlayerDidPersistContentKey	FairPlay DRM	PropTypes.func

Method

function	description
play()	play
pause()	pause
stop()	end
seek(time, callback)	Set playback progress, in seconds
replaceToPlay(source)	Replace the playback source
rate(rate)	Set playback rate
autoPlay(autoPlay)	Set auto play, autoPlay is PropTypes.bool
videoGravity(videoGravity)	Set the video aspect ratio, videoGravity: aspect, aspectFill, scaleFill
toEmbedded(animated = true, callback)	Enter embedded screen mode
toFloat(animated = true, callback)	Enter floating screen mode
toFull(orientation =‘landscapeLeft’, animated = true, callback)	Enter full screen mode, orientation: landscapeLeft, landscapeRight
fullScreenMode(fullScreenMode)	Set the full screen mode, fullScreenMode:portrait, landscape

use

//Basic use// 
BasePlayerExample.js 
        < EZPlayer 
          ref = { ( e )  =>  this . _EzPlayer  =  e } 
          style = { styles . Player } 
          source = { this . State . Source  }

          autoPlay={true}
          videoGravity={'aspect'} 
          fullScreenMode={'landscape'}
        />
//自定义ui
//EZCustomPlayer.js
          <TouchableWithoutFeedback onPress={this.action.onScreenTouch}>
                <View>
                    <EZPlayer
                        {...this.props}
                        useDefaultUI={false}
                        ref={(nativePlayer) => this.player.ref = nativePlayer}
                        style={this.props.style}
                        onPlayerHeartbeat={this.events.onPlayerHeartbeat}
                        onPlayerPlaybackTimeDidChange={this.events.onPlayerPlaybackTimeDidChange}
                        onPlayerStatusDidChange={this.events.onPlayerStatusDidChange}
                        onPlayerPlaybackDidFinish={this.events.onPlayerPlaybackDidFinish}
                        onPlayerLoadingDidChange={this.events.onPlayerLoadingDidChange}
                        onPlayerControlsHiddenDidChange={this.events.onPlayerControlsHiddenDidChange}
                        onPlayerDisplayModeDidChange={this.events.onPlayerDisplayModeDidChange}
                        onPlayerDisplayModeChangedWillAppear={this.events.onPlayerDisplayModeChangedWillAppear}
                        onPlayerDisplayModeChangedDidAppear={this.events.onPlayerDisplayModeChangedDidAppear}
                        onPlayerTapGestureRecognizer={this.events.onPlayerTapGestureRecognizer}
                        onPlayerDidPersistContentKey={this.events.onPlayerDidPersistContentKey}
                    />
                    {this.renderLoader()}
                    {this.renderBottomControls()}
                </View>
            </TouchableWithoutFeedback>

ps: react-native-ezplayer finishing

All

• Support VR
• Support iPad pip
• Support local m3u8
• Support multi-rate control
• Support 3d touch screenshot, simple processing after screenshot
• Support download while caching
• Support video decryption playback
• Support tvOS
• Support play percentage trigger
• globalization
• Memory playback
• Support filters

License

EZPlayer complies with the MIT protocol, please refer to MIT for details

Download Details:

Author: easyui

Source Code: https://github.com/easyui/EZPlayer

#react-native #react #mobile-apps