源码地址react-native-rn-videoplayer

功能 ：控件锁定，滑动调节音量、屏幕亮度，挂载恢复亮度，视频左右滑动以及拖动进度条调节视频进度，全屏切换，缓存进度，双击视频暂停，ios全屏隐藏底部小横条等，基于react-native-video

推荐查看视频预览地址

动图效果预览

android2.2.3.gif

• Version 2.x requires react-native >= 0.60.0
• Version 1.3.2 requires react-native <= 0.59.9

安装

- 查看安装说明

使用

import Videoplayer from 'react-native-rn-videoplayer';

<VideoPlayer
url={"https://xxxxx.mp4"}
navigation={this.props.navigation}//路由 用于小屏屏播放的返回按钮
ref={(ref)=>this.player=ref}
poster={"http:XXX.jpg"}//视频封面
/>

api

• url 视频地址

• continuous 是否开启全屏时的选集功能 适合连续剧 默认 false

    continuous={true}
  

• renderAllSeenList 点击选集后显示的集数列表

  ···
  <VideoPlayer
    url={"https://xxxxx.mp4"}
    ref={(ref)=>this.player=ref}
    renderAllSeenList={this.renderAllSeenList}
  />
    
  ···
    renderAllSeenList = () => (
    <View style={{ width: height / 2.5, backgroundColor: "rgba(0,0,0,0.6)", position: "absolute", top: 0, bottom: 0, right: 0, }}>
        <ScrollView>
          <Button 
            onPress={()=>{
                const newdata = this.state.data
                      newdata.index = newindex//集数
                //更新集数 并重新开始播放
                this.setState({ data: newdata }, () => { this.player.rePlay() })
            }}
            
          />  
        </ScrollView>      
  
      </View>
    )
  
  

• nextBtnFun 全屏时下一集按钮的方法 当是最后一集的时候应将值变为false，将按钮置灰

  const {data} = this.state
  //data.index为集数
  //当当前播放的集数和总集数相同时，将nextBtnFun重置为false
  nextBtnFun={
    data.index == data.datalist[data.datalist.length - 1].num - 1 ? false : this.nextBtnFun
    }
  

• storeComponent 右上角收藏按钮的图标

    storeComponent={()=><Image/>}
  

• moreSetting 右上角更多按钮的图标

    moreSetting={()=><Image/>}
  

• setPaused 播放暂停

    this.player.setPaused(true)//true暂停；false播放；
  
    <VideoPlayer
     ref={(ref)=>this.player=ref}
    />
  
  

• reLoad 重新加载

    this.player.reLoad()
  
    <VideoPlayer
     ref={(ref)=>this.player=ref}
    />
  
  

• onSmallBack 当视频是小窗口时 点击返回按钮的回调 可以在此添加返回上个页面的功能 func

• onStore 点击右上角收藏按钮的回调 func

• onMoreFun 点击右上角更多按钮的回调 func

• onWindowChange 窗口改变的回调 func

  
    <VideoPlayer
      onWindowChange={(e)=>{}}//e:"full"全屏 "small"小屏 
    />
  
  

• onLoad 视频加载成功可以开始播放的回调 继承react-native-veideo

• onSeek 调整进度后的回调 继承react-native-video的onSeek

• onEnd 播放完的回调 继承react-native-video的onSeek

• onBuffer 是否处于等待加载时 这里可以取到视频卡住展示loading或者是视频可以播放隐藏loading的回调

• poster 视频封面图 视频还不能播放的时候展示的封面图 并不是loading框

poster={"http://i1.hdslb.com/bfs/archive/784013a39c59aede1ee9e775ec271790dfd7dc4b.jpg@320w_200h.jpg"}

• ..... 继承全部的react-native-video的方法及属性

• changeWindows(boolean) 切换全屏或者小屏

  true 全屏， false 小屏

  Example:

    <VideoPlayer ref={(ref)=>this.player=ref}/>
    this.player.changeWindows(true); // 全屏
  

暴露方法

import {NgxuSetting} from 'react-native-rn-videoplayer'

显示或者隐藏安卓底部虚拟按键

const Setting = new NgxuSetting()
Setting.hideAndroidBottom()
Setting.showAndroidBottom()

获取手机系统亮度

const Setting = new NgxuSetting()
Setting.getBrightness((e)=>{consoloe.log(e)})

改变ios系统亮度 android 当前app亮度

• android仅仅只改变当前active亮度，不会修改系统亮度，修改系统亮度是非常麻烦的事情，需要用户手动打开手机设置，app权限设置，手动打开“允许修改系统设置“的高级权限
• ios则是改变系统亮度你可以

   const Setting = new NgxuSetting()
   Setting.SetBrightness(1)//0-1之间