Skip to content

easyui/react-native-ezplayer

Repository files navigation

react-native-ezplayer

License NPM version

EZPlayer component for react-native apps

预览

EZPlayerRNBase EZPlayerRNList

介绍

基于EZPlayer封装的视频播放器,功能丰富,快速集成,可定制性强。

要求

  • iOS 9.0+
  • Xcode 12.0+
  • Swift 5.0+
  • React Native 0.63.3+

特性

使用

可以参考EZPlayerExample_RN项目,

react-native-ezplayer 文件:

EZRNPlayerView.swift : 对EZPlayer的封装,对接javascript

EZRNPlayerViewManager.swift : EZPlayer组件管理器

EZRNPlayerViewBridge.h & EZRNPlayerViewBridge.m : oc桥接

EZPlayer.js : 对EZPlayer封装的js api

属性

key description value
source 视频数据源 PropTypes.object
autoPlay 设置数据源后自动播放 PropTypes.bool
useDefaultUI 使用EZPlayer自带皮肤 PropTypes.bool
videoGravity 视频画面比例 PropTypes.string(aspect,aspectFill,scaleFill)
fullScreenMode 全屏模式是竖屏还是横屏 PropTypes.string(portrait,landscape)
floatMode 浮动模式支持系统PIP和window浮层 PropTypes.string(none,auto,system,window)
onPlayerHeartbeat 播放器声明周期心跳 PropTypes.func
onPlayerPlaybackTimeDidChange addPeriodicTimeObserver方法的触发 PropTypes.func
onPlayerStatusDidChange 播放器状态改变 PropTypes.func
onPlayerPlaybackDidFinish 视频结束 PropTypes.func
onPlayerLoadingDidChange loading状态改变 PropTypes.func
onPlayerControlsHiddenDidChange 播放器控制条隐藏显示 PropTypes.func
onPlayerDisplayModeDidChange 播放器显示模式改变了(全屏,嵌入屏,浮动) PropTypes.object
onPlayerDisplayModeChangedWillAppear 播放器显示模式动画开始 PropTypes.func
onPlayerDisplayModeChangedDidAppear 播放器显示模式动画结束 PropTypes.func
onPlayerTapGestureRecognizer 点击播放器手势通知 PropTypes.func
onPlayerDidPersistContentKey FairPlay DRM PropTypes.func
onPlayerPIPControllerWillStart 即将开启画中画 PropTypes.func
onPlayerPIPControllerDidStart 已经开启画中画 PropTypes.func
onPlayerPIPFailedToStart 开启画中画失败 PropTypes.func
onPlayerPIPControllerWillEnd 即将关闭画中画 PropTypes.func
onPlayerPIPControllerDidEnd 已经关闭画中画 PropTypes.func
onPlayerPIPRestoreUserInterfaceForStop 关闭画中画且恢复播放界面 PropTypes.func

方法

function description
play() 播放
pause() 暂停
stop() 结束
seek(time, callback) 设置播放进度,单位秒
replaceToPlay(source) 替换播放源
rate(rate) 设置播放速率
autoPlay(autoPlay) 设置自动播放,autoPlay是PropTypes.bool
videoGravity(videoGravity) 设置视频画面比例,videoGravity:aspect,aspectFill,scaleFill
toEmbedded(animated = true, callback) 进入嵌入屏模式
toFloat(animated = true, callback) 进入悬浮屏模式
toFull(orientation = 'landscapeLeft', animated = true, callback) 进入全屏模式,orientation: landscapeLeft , landscapeRight
fullScreenMode(fullScreenMode) 设置全屏的模式,fullScreenMode:portrait , landscape
floatMode(floatMode) 设置浮窗的模式,fullScreenMode:none , auto, system, window,默认值auto

demo文件:

BasePlayerExample.js : EZPlayer的基础功能演示

TablePlayerExample.js :EZPlayer 在列表中的演示

TablePlayerCell.js : 列表的cell

EZCustomPlayer.js : 对EZPlayer.js进行封装,使用自定义ui,自定义ui可参考

Utils.js : 工具类

使用

//基本使用
//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>

License

EZPlayer遵守MIT协议,具体请参考MIT