react-native 封装视频播放器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 });
  }

视频组件

<View style={styles.Video}>
 {
 loading ? <View style={styles.loading}>
 <ActivityIndicator size='large' color='lightgray' /> // 缓冲圈
 </View> : null
 }
 <Video
 ref={(ref: Video) => {
 this.video = ref; // 视频Video的ref
 }}
 source={{
 uri: 'http://xxx/xxx.mp4', //播放路径
 }}
 style={{ width: '100%', height: '100%' }}
 rete={1}
 volume={1}
 paused={paused} // 暂停变量
 onEnd={() => {
 this.onEnd(); // 播放结束时执行
 }}
 onBuffer={data => this.onBuffer(data)} // 缓冲时执行,用于显示缓冲圈
 onProgress={data => this.setTime(data)} // 播放时执行函数,用于同步步进器进度
 onLoad={data => this.setDuration(data)} // 播放前得到总时长,用于步进器设置总长
 muted={muted} // 静音
 />
 </View>

控制台

<View style={styles.videoControl}>
 {/* 暂停按钮 */}
 <TouchableOpacity
 onPress={() => {
 this.changePlayed();
 }}
 >
 <Image style={styles.paused} source={paused ? pausedImg : played} />
 </TouchableOpacity>
 <Slider
 value={sliderValue}
 maximumValue={duration}
 // onValueChange 和 onSlidingComplete 是修改步进器进度时触发的函数
 // 可以在此时同步视频播放,同步视频播放的函数是,video的Ref.seek()
 // 中间需要设置视频暂停和播放,否则边拖动边播放会很奇怪
 onValueChange={(value) => {
 this.video.seek(value);
 this.setState({
 paused: true,
 });
 }}
 onSlidingComplete={(value) => {
 this.video.seek(value);
 this.setState({
 paused: false,
 });
 }}
 style={styles.slider}
 />
 {/* 静音按钮 */}
 <TouchableOpacity
 onPress={() => {
 this.setState({ muted: !muted });
 }}
 >
 <Image style={{ marginLeft: 10, height: 24, width: 24 }} source={muted ? mute : sound} />
 </TouchableOpacity>
 {/* 全屏按钮 */}
 <TouchableOpacity
 onPress={() => {
 // 这里涉及到react-native-orientation-locker
 // 可以锁定应用为横屏,这里的状态设置是我的全屏解决方案
 this.setState({ fullVideoShow: true, sliderValue2: sliderValue }, () => {
 this.setState({ paused: true });// 需要将原视频暂停
 });
 Orientation.lockToLandscapeLeft();
 }}
 >
 <Image style={{ marginLeft: 10, height: 20, width: 20 }} source={fullScreen} />
 </TouchableOpacity>
 </View>

全屏实现方案(可参考)

我采用的是弹出层方案,使用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暂停,可以在全屏按钮事件那里我有提到。

放大视频

<Modal
 visible={fullVideoShow}
 transparent
 animationType='slide'
 >
 <View style={styles.videoModelBack}>
 <View style={styles.videoModel}>
 {
 loading ? <View style={styles.loading}>
 <ActivityIndicator size='large' color='lightgray' /> //缓冲圈可复用状态
 </View> : null
 }
 <View style={{ flex: 1 }}>
 <Video
 ref={(ref: Video) => {
 this.video2 = ref;
 }}
 source={{
 uri: 'http://xxx/xxx.mp4',
 }}
 style={{ flex: 1 }}
 rete={1}
 volume={1}
 paused={paused2}
 onEnd={() => {
 this.onEnd(0);
 }}
 onBuffer={data => this.onBuffer(data)}
 onProgress={data => this.setTime2(data)}
 onLoad={data => this.onLoad2(data)}
 muted={muted}
 />
 </View>
 </View>
 <View style={styles.videoBack}>
 <TouchableOpacity
 onPress={() => {
 this.changePlayed2();
 }}
 >
 <Image style={[styles.paused]} source={paused2 ? pausedImg : played} />
 </TouchableOpacity>
 <Slider
 value={sliderValue2}
 maximumValue={duration}
 onValueChange={(value) => {
 this.video2.seek(value);
 this.setState({
 paused2: true,
 });
 }}
 onSlidingComplete={(value) => {
 this.video2.seek(value);
 this.setState({
 paused2: false,
 });
 }}
 style={styles.slider}
 />
 <TouchableOpacity
 onPress={() => {
 this.setState({ muted: !muted });
 }}
 >
 <Image style={styles.img} source={muted ? mute : sound} />
 </TouchableOpacity>
 <TouchableOpacity
 onPress={() => {
 this.outFullScreen();
 }}
 >
 <Image source={outFullScreen} /> // 退出全屏按钮
 </TouchableOpacity>
 </View>
 </View>
 </Modal>

尾言

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

作者:在下月亮有何贵干原文地址:https://blog.csdn.net/weixin_43877799/article/details/125273128

%s 个评论

要回复文章请先登录注册