zoukankan      html  css  js  c++  java
  • React-Native视频组件react-native-video使用(安卓版)

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7366019.html

    一:安装

    在IDE中打开你的项目,然后在IDE的terminal,输入:

    npm i -S react-native-video

    安装第三方的视频组件。

    然后,执行以下命令,把下载回来的第三方库连接到本地库中:

     react-native link

    二:使用
    在RN的js文件中,引入视频播放组件:

    import Video from 'react-native-video';

    然后,在就可以使用这个组件来播放视频了。

    播放本地视频:

    <Video
        source={require('./video/xx.mp4')}
        style={styles.播放器样式}
        rate={this.state.rate}                          // 控制暂停/播放,0 代表暂停paused, 1代表播放normal.
        paused={false}
        volume={1}                   // 声音的放大倍数,0 代表没有声音,就是静音muted, 1 代表正常音量 normal,更大的数字表示放大的倍数
        muted={true}                  // true代表静音,默认为false.
        resizeMode='contain'       // 视频的自适应伸缩铺放行为,
        onLoad={this.onLoad}                       // 当视频加载完毕时的回调函数
        onLoadStart={this.loadStart}            // 当视频开始加载时的回调函数
        onProgress={this.onProgress}   //  进度控制,每250ms调用一次,以获取视频播放的进度
        onEnd={this.onEnd}             // 当视频播放完毕后的回调函数
        onError={this.videoError}    // 当视频不能加载,或出错后的回调函数

    repeat={false} // 是否重复播放 />

    播放网络视频:

    <Video
        source={{uri:'视频url'}}
        style={styles.播放器样式}
        rate={this.state.rate}                          // 控制暂停/播放,0 代表暂停paused, 1代表播放normal.
        paused={false}
        volume={1}                   // 声音的放大倍数,0 代表没有声音,就是静音muted, 1 代表正常音量 normal,更大的数字表示放大的倍数
        muted={true}                  // true代表静音,默认为false.
        resizeMode='contain'       // 视频的自适应伸缩铺放行为,
        onLoad={this.onLoad}                       // 当视频加载完毕时的回调函数
        onLoadStart={this.loadStart}            // 当视频开始加载时的回调函数
        onProgress={this.onProgress}   //  进度控制,每250ms调用一次,以获取视频播放的进度
        onEnd={this.onEnd}             // 当视频播放完毕后的回调函数
        onError={this.videoError}    // 当视频不能加载,或出错后的回调函数

    repeat={false} // 是否重复播放 />
  • 相关阅读:
    阅读
    做人做事、原则
    20150913HTML5心得
    动画-七夕言情
    20150818 句子
    网站链接备份
    javascript设计模式2
    javascript设计模式1
    sunlime操作
    node系列4
  • 原文地址:https://www.cnblogs.com/ygj0930/p/7366019.html
Copyright © 2011-2022 走看看