react-native 视频播放器



  • react-native-tomatohut-player

    HitCount
    Npm
    MIT
    统计

    简介

    包装react-native-video,添加了部分自己需要的功能,对于没有开发的属性可以自己fork该项目去加,或者提出issue,有空我会写下(小声逼逼:小菜鸡一个,难的不会,简单的懒~)
    只写了Android,IOS没看,应该都差不多,具体的自己调试(没有Mac也没法调试,有土豪的话可以给我捐一台,我不会介意的,哈哈哈)

    安装(windows)

    npm install react-native-video@4.4.4 --save
    npm install react-native-linear-gradient --save
    npm install react-native-orientation --save
    npm install react-native-keep-awake --save
    npm install react-native-vector-icons --save
    npm install react-native-tomatohut-player --save
    echo D | xcopy node_modules\react-native-vector-icons\Fonts android\app\src\main\assets\fonts /e
    

    功能

    • 滑屏快进
    • 全屏
    • 开始时间
    • 双击暂停
    • 用的时候再写

    截图

    image
    image
    image

    实例

    import React, {Component} from 'react';
    import Video from 'react-native-tomatohut-player';
    
    export default class App extends Component{
        render() {
            return (
                <Video
                    source={{uri: 'xxxx'}}
                    themeColor={'red'}
                    title={'哪吒'}
                    // onFullScreen={(value) => console.log(value)}
                    // startTime={1000}
                    // onProgress={(event) => console.log(event)}
                />
            );
        }
    }
    
    

    属性

    名称 备注
    source 资源路径(写法见react-native-video#source
    themeColor 加载按钮与silder滑块颜色,见图
    title 视频标题名称
    startTime 视频开始时间
    titleLeft 标题左边组件,可以放置一个后退图标

    方法

    名称 备注
    onFullScreen 返回是否全屏(true为全屏)
    onProgress 返回播放参数(见react-native-video#onprogress


  • 这个播放器有几个小问题,1.播放结束时点击重新播放,最左边时间不重置,滑动条也不会回到起点,2.滑动时滚动条有时会自动跳到原来位置而不是跟着手指走,3.建议在跳转播放时增加个正在加载的图标



  • This post is deleted!


  • 当第一次播放完后,点击重新重新播放,打印onProgress函数的data值发现竟然是空对象,这也就是为什么时间不重置的原因,可是为什么onProgress函数的data值是空呢??


Log in to reply