酷徒LOGO

react-native-video-controls, React Native的本地视频组件


  • 源代码名称:react-native-video-controls
  • 源代码网址:http://www.github.com/itsnubix/react-native-video-controls
  • react-native-video-controls源代码文档
  • react-native-video-controls源代码下载
  • Git URL:
    git://www.github.com/itsnubix/react-native-video-controls.git
    Git Clone代码到本地:
    git clone http://www.github.com/itsnubix/react-native-video-controls
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/itsnubix/react-native-video-controls
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    react-native-video-controls

    React Native 支持RN 0.45,更低版本请使用1.3.1或更低版本。

    功能

    这个包包含一组简单的GUI控件,使用

    默认情况下,或者,可以向组件提供你自己的onBack prop来覆盖这个功能,你还应该向组件提供自己的onEnd道具,以便它知道当视频结束播放时应该做什么。

    默认情况下,点击屏幕地方都会显示播放机控制,10s后控件消失,双击可切换全屏。

    安装

    运行npm install --save react-native-video react-native-video-controls

    然后运行react-native link react-native-video

    如果使用RN < 39 runnpm install --save react-native-video-controls@1.0.1 注意这个版本包括react-native-video作为普通依赖而不是对等依赖。

    用法

    <VideoPlayer>组件遵循位于react-native-video,它还需要一些额外的道具,在API部分概述。

    对于基本操作,<VideoPlayer>组件需要一个视频源和一个导航器属性,组件的默认后退按钮功能依赖于在the <Navigator>中使用React Native功能,并从堆栈中弹出当前场景,如果需要,可以重写此方法,有关更多信息,请参见API

    // At the top where our imports are...importVideoPlayerfrom'react-native-video-controls';// in the component's render() function<VideoPlayer
     source={{ uri:'https://vjs.zencdn.net/v/oceans.mp4' }}
     navigator={ this.props.navigator }/>

    要播放本地文件,请使用require语法,如下所示:

    <VideoPlayer source={ require('path/to/file') } />

    API

    <VideoPlayer>组件可以接受许多输入来根据需要定制它,它们的概述如下:

    道具

    可以传递<Video />组件在事件

    这些是各种事件,你可以在组件中hook和fire函数:

    回调描述
    onEnterFullscreen 当按下全屏按钮后视频进入全屏时触发
    onExitFullscreen 当按下全屏按钮后视频退出全屏时触发
    onError 加载视频时遇到错误时触发
    onPause 在按下播放/暂停按钮后暂停视频时触发
    onPlay 在按下播放/暂停按钮后开始播放视频时触发
    onBack 当按下后退按钮时触发的函数,如果使用自定义导航,就覆盖
    onEnd 视频完成后触发

    控件

    这些是各种控件,你可以根据需要打开或关闭。所有这些道具默认为false,覆盖它们以禁用控件

    控制描述
    disableFullscreen 隐藏全屏按钮
    disablePlayPause 隐藏播放和暂停切换
    disableSeekbar 隐藏seekbar
    disableVolume 隐藏音量控制
    disableTimer 隐藏计时器
    disableBack 隐藏后退按钮




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备17041772号-2  |  如果智培  |  酷兔英语  |  帮酷