React Native react-native-video 视频库

不念不忘少年蓝@ 2021-11-11 07:04 363阅读 0赞

> RN 项目 安装 react-native-video 视频库

# 安装 react-native-video
    yarn add react-native-video

// package.json
    { 
      "name": "RNMyBaby",
      "version": "0.0.1",
      "private": true,
      "scripts": { 
        "start": "react-native start",
        "test": "jest",
        "lint": "eslint ."
      },
      "dependencies": { 
        "@ant-design/react-native": "^3.1.11",
        "mockjs": "^1.0.1-beta3",
        "react": "16.8.6",
        "react-native": "0.60.4",
        "react-native-gesture-handler": "^1.3.0",
        "react-native-splash-screen": "^3.2.0",
        "react-native-vector-icons": "^6.6.0",
        "react-native-video": "^5.0.0",
        "react-native-webview": "^5.12.1",
        "react-navigation": "^3.11.1"
      },
      "devDependencies": { 
        "@babel/core": "^7.5.5",
        "@babel/runtime": "^7.5.5",
        "@react-native-community/eslint-config": "^0.0.5",
        "babel-jest": "^24.8.0",
        "babel-plugin-import": "^1.12.0",
        "eslint": "^6.1.0",
        "jest": "^24.8.0",
        "metro-react-native-babel-preset": "^0.55.0",
        "react-test-renderer": "16.8.6"
      },
      "jest": { 
        "preset": "react-native"
      }
    }

> 自行封装组件，参照文档配置使用

1.  VideoPlayer.js 视频组件

/** * @Author: brady * @Date: 2019-08-03 * @Last Created time: 17:36:32 * @Description: */
    import React, {  Component } from "react";
    import {  StyleSheet, View, Text, Image } from "react-native";
    import Video from "react-native-video";
    import PropTypes from "prop-types";
    
    type Props = { };
    export default class VideoPlayer extends Component<Props> { 
      // 默认属性
      static defaultProps = { };
    
      // 属性类型
      static propTypes = { 
        video: PropTypes.string,
        options: PropTypes.object,
        author: PropTypes.object
      };
    
      // 构造
      constructor(props) { 
        super(props);
        // 初始状态
        this.state = { };
      }
    
      /** * Video 样式: * 1. 设置width、height 等比缩放置顶 * 2. 使用 absolute 绝对定位，垂直居中，全屏显示 * */
    
      // 渲染
      render() { 
        const {  video, options, author } = this.props;
        return (
          <View style={ styles.container}>
            <Video
              source={ {  uri: video }}
              // rate={options.rate} //1.0表示默认速率
              // volume={options.volume} //声音大小
              // paused={options.paused} //默认播放
              // repeat={options.repeat} //不重复播放
              // muted={options.muted} //是否静音
              controls={ options.controls} // 显示控件
              resizeMode={ options.resizeMode} // 等比缩放
              style={ options.style} // 样式
              // onLoadStart={}//视频开始播放的时候调用方法
              // onLoad={} //不断调用
              // onProgress={}//播放时，每隔250ms，发送请求，附带当前播放时间
              // onEnd={}//播放结束
              // onError={}//遇到错误时
              // ref={ref => (this.player = ref)}
              // onBuffer={}
            />
            <View style={ styles.authorInfo}>
              <View style={ styles.infoLeft}>
                <Image
                  source={ {  uri: author.avatar }}
                  style={ styles.authorHeader}
                />
              </View>
              <View style={ styles.infoRight}>
                <Text>{ author.nickname}</Text>
                <Text>{ author.desc}</Text>
              </View>
            </View>
          </View>
        );
      }
    
      componentDidMount() { 
        console.log(this.props);
      }
    }
    
    const styles = StyleSheet.create({ 
      container: { 
        flex: 1,
        // justifyContent: "center",
        // alignItems: "center",
        backgroundColor: "#FCF5FF"
      },
      authorInfo: { 
        padding: 12,
        flexDirection: "row",
        // alignItems: "center"
      },
      authorHeader: { 
        width: 64,
        height: 64,
        borderRadius: 32
      },
      infoRight: { 
        flex: 1,
        marginLeft: 8
      }
    });

1.  VideoDetail.js 视频详情组件

/** * @Author: brady * @Date: 2019-08-02 * @Last Created time: 22:01:51 * @Description: */
    import React, {  Component } from "react";
    import {  StyleSheet, View, Text, Dimensions } from "react-native";
    import VideoPlayer from "../components/VideoPlayer";
    
    // Dimensions 用于获取设备宽、高、分辨率
    const {  width, height } = Dimensions.get("window");
    
    type Props = { };
    export default class VideoDetail extends Component<Props> { 
      // 默认属性
      static defaultProps = { };
    
      // 属性类型
      static propTypes = { };
    
      // 构造
      constructor(props) { 
        super(props);
        // 初始状态
        this.state = { 
          options: { 
            rate: 1.0, // 1.0表示默认速率
            volume: 3, // 声音大小
            paused: false, // 默认播放
            repeat: false, // 不重复播放
            muted: false, // 是否静音
            controls: true, // 显示控件
            resizeMode: "contain", // 等比缩放
            style: styles.backgroundVideo // 样式
          }
        };
      }
    
      // 渲染
      render() { 
        const {  params } = this.props.navigation.state;
        return (
          <View style={ styles.container}>
            <VideoPlayer
              video={ params.video}
              options={ this.state.options}
              author={ params.author}
            />
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({ 
      container: { 
        flex: 1,
        // justifyContent: "center",
        // alignItems: "center",
        backgroundColor: "#F5FCFF"
      },
      backgroundVideo: { 
        width: width,
        height: (width * 9) / 16,
        // position: "absolute",
        // top: 0,
        // left: 0,
        // bottom: 0,
        // right: 0,
        backgroundColor: "#000"
      }
    });

注：

1.  如需**全屏展示**，使用 backgroundVideo 样式中的 **绝对定位** 样式。
2.  如需**置顶显示**，使用 backgroundVideo 样式中的 **宽、高等比缩放**样式。
3.  其他配置请参照官方文档：[https://github.com/react-native-community/react-native-video][https_github.com_react-native-community_react-native-video]

具体效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 2]

[https_github.com_react-native-community_react-native-video]: https://github.com/react-native-community/react-native-video
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: /images/20211109/0b96822b0ed24d22b215d2fbcb50aaf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]: /images/20211109/89b71b21633c45efacdcb59d790ebe77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 2]: /images/20211109/7a6589236c844c748bfe923c953c0df6.png