react-native 封装视频播放器react-native-video的使用

目录

• 前言
• react-native-orientation-locker
• react-native-video
• 全屏实现方案（可参考）
• 尾言

前言

最近工作业务用到了react-native-video，还需要能够全屏，全屏需要用到锁定应用方向（横屏），需要用到组件react-native-orientation-locker，本文记录使用方法以及提供一种解决思路。

react-native-orientation-locker

横竖屏方法

我就只介绍这常用的三个，其他的可以翻看官方文档

import Orientation from 'react-native-orientation-locker';
Orientation.lockToLandscapeLeft() // 向左方向锁定横屏
Orientation.lockToLandscapeRight() // 向右方向锁定横屏
Orientation.unlockAllOrientations(); // 解除锁定
Orientation.lockToPortrait(); // 锁定竖屏

react-native-video

导入

import Video from 'react-native-video';

函数部分

  // 设置总时长
  setDuration({ duration }) {
    this.setState({ duration });
  }

  // 播放结束可将暂停变量设置为true
  onEnd() {
    this.setState({
      paused: true,
    });
  }

  // 缓冲，loading变量可控制缓冲圈显示
  onBuffer({ isBuffering }) {
    this.setState({ loading: isBuffering });
  }

  // 设置进度条和播放时间的变化，sliderValue用来同步步进器
  setTime({ currentTime }) {
    this.setState({
      sliderValue: currentTime,
    });
  }
  
  // 播放暂停
  changePlayed() {
    this.setState({ paused: !this.state.paused });
  }

视频组件

    
        {
            loading ? 
                 // 缓冲圈
             : null
        }
        

控制台

    
        {/* 暂停按钮 */}
         {
                this.changePlayed();
            }}
        >
            
        
         {
                this.video.seek(value);
                this.setState({
                    paused: true,
                });
            }}
            onSlidingComplete={(value) => {
                this.video.seek(value);
                this.setState({
                    paused: false,
                });
            }}
            style={styles.slider}
        />
        {/* 静音按钮 */}
         {
                this.setState({ muted: !muted });
            }}
        >
            
        
        {/* 全屏按钮 */}
         {
                // 这里涉及到react-native-orientation-locker
                // 可以锁定应用为横屏，这里的状态设置是我的全屏解决方案
                this.setState({ fullVideoShow: true, sliderValue2: sliderValue }, () => {
                  this.setState({ paused: true });// 需要将原视频暂停
                });
                Orientation.lockToLandscapeLeft();
            }}
        >
            
        
    

全屏实现方案（可参考）

我采用的是弹出层方案，使用Orientation横屏时，新建一个model层覆盖全屏，然后新建一个相同的播放组件，记得将原视频组件暂停。

可以参考的点，以下表示model层上的视频组件

  // 放大时，总长已经不需要再次获取，我们可以在onLoad2时将sliderValue赋值给video2
  // 达到放大时同步进度的效果
  onLoad2(data) {
    this.video2.seek(this.state.sliderValue);
  }
  
  // 设置vedio2的同步步进器2进度时，需要注意，currentTime>0再赋值
  // 否则在视频加载过程中会出现步进器2跳一下0再恢复的情况
  setTime2({ currentTime }) {
    if (currentTime > 0) {
      this.setState({
        sliderValue2: currentTime,
      });
    }
  }
  
  // 退出全屏
  outFullScreen() {
    const { sliderValue2, paused2 } = this.state;
    this.setState({ fullVideoShow: false, sliderValue: sliderValue2);
    Orientation.lockToPortrait();
    // 退出时将原视频进度同步
    this.video.seek(sliderValue2);
  }
  
  // 播放暂停
  changePlayed2() {
    this.setState({ paused2: !this.state.paused2 });
  }
  
  // 另外全屏时，要将原视频paused暂停，可以在全屏按钮事件那里我有提到。

放大视频

    
        
            
                {
                    loading ? 
                         //缓冲圈可复用状态
                     : null
                }
                
                    
            
            
                 {
                        this.changePlayed2();
                    }}
                >
                    
                
                 {
                        this.video2.seek(value);
                        this.setState({
                            paused2: true,
                        });
                    }}
                    onSlidingComplete={(value) => {
                        this.video2.seek(value);
                        this.setState({
                            paused2: false,
                        });
                    }}
                    style={styles.slider}
                />
                 {
                        this.setState({ muted: !muted });
                    }}
                >
                    
                
                 {
                        this.outFullScreen();
                    }}
                >
                     // 退出全屏按钮
                
            
        
    

尾言

样式我没有写出来，因为内容可能比较多，布局情况也不大相同，想完全复用不太现实，不过如果你耐心点理解重要的部分，相信你会有所收获。

到此这篇关于react-native 封装视频播放器react-native-video的使用的文章就介绍到这了,更多相关react-native 视频播放器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！