React-Native-Video视频组件使用（一）

前言

最近在使用React-Naitve实现视频组件的过程中遇到了很多坑，在网上查了好多资料都是单纯的罗列API，今天功能实现了，把实现过程中的一些心得分享给大家～

简单介绍

React-Native-Video是在React-Native中实现视频播放的组件，其自带的API完全满足基本的视频播放需求，但是如果有切换全屏显示的需求还需要配合React-Native-orientation这个库来使用。

基本使用

    <Video 
        ref={ref = this.Video = ref}
        source={{uri: "url"}}  
        poster={"url"}
        paused={paused}
        onProgress={({currentTime}) => {}}
        onLoad={({duration}) => {}}
        onEnd={() => {}}
        resizeMode="cover"
        posterResizeMode="cover"
        style={style}
    />

source :视频资源路径，这里可以是线上路径，也可以是本地路径source={require:("./video.mp4")}

poster :视频在播放之前显示的封面，这里的封面是指的视频在不能播放的这段时间显示的图片，他的消失与否只取决于视频是否可以播放了，更类似于等待视频加载的过程中显示的请等待的那个页面，所以当你真的需要做一个视频的封面时，还是需要正经做个浮层覆盖到视频组件上。

paused :用来控制视频的播放与暂停功能，true为播放，false为暂停。

onProgress :当视频在播放时的回调，一般用来传出视频播放到的当前时间，currentTime值为当前时间，单位为秒，通过该回调同步进度条与视频的进度，若做时间显示需要对时间进行格式化：

    function formatTime(second) {
        let h = 0, i = 0, s = parseInt(second);
        if (s > 60) {
          i = parseInt(s / 60);
          s = parseInt(s % 60);
        }
        // 补零
        let zero = function (v) {
          return (v >> 0) < 10 ? "0" + v : v;
        };
        return [zero(h), zero(i), zero(s)].join(":");
    }

onLoad :视频加载完成准备播放时调用，duration为这个视频的总时长，当你要做成 00:00:00/1:30:02 这种时间显示效果的时候这个回调就很有用了～

onEnd :视频播放结束时进行的回调,视频播放完成之后，需要将视频还原成初始状态，就是通过该回调进行设置，比如将视频的播放进度调回初始位置this.Video.seek(0),充值进度条的位置，视频封面重新显示等～～～

resizeMode :当播放的视频与视频组件的尺寸不合适时，这个属性会设置视频的展示方式，如是否撑满视频组建区域、还是按原尺寸显示，值有： none、cover、contain、stretch。

posterResizeMode :这个属性的含义与上面的差不多，这个是设置海报图片的展示方式，值有contain (default)、center、cover、none、repeat、stretch。

补充

通过这些API基本就可以实现简单的视频播放功能，当然还有一些其他很有用的API比如调节视频的播放速率，调节视频音量（手机都有音量键了为啥还要在设置音量？略），等多的功能在git上有勞简单勞介绍，有需要请自取～

注意

初始的视频组建只是播放视频，而播放视频所需要的功能及展示按键均需要自己设计实现浪，惊不惊喜，这么设计可能是为了更好的客制化吧，视频控制的API已经暴露的很全了，这样也没什么不好，自定义点击事件处理就完了拾。

总结

我这里只是实现了简单的视频功能，并没用发挥出这个组件的强大功力，做这个分享只是想帮助那些刚接触他的小伙伴别一脸懵逼的进去，在一脸懵逼的出来，然后百度开来藍～更多更优秀的更能等待小伙伴们的研究，希望我的分享对大家能有所帮助～