react-player-component v1.0.0

⭐说明

• 练习作品，没有经过严格测试，可能会有bug，请即使反馈
• 目前移动端只进行了简单适配，很多功能不全，后序更新会及时弥补
• PC端的按键功能暂时缺失，后序更新会及时弥补
• 欢迎进行二次开发，同时如果你对这个项目感兴趣，对你有帮助，请点一个⭐
• 如果有什么希望增加的功能可以进行反馈

✨ 特性

• 📦 开箱即用的高质量 React 组件
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件
• 🌍 国际化语言支持
• 🎨 主题，组件，定制能力
• :facepunch: 强大的 API 和回调函数
• :zap: 支持PC端和移动端（移动端进行了简要适配，功能不全）
• :gem: 支持HLS（.m3u8）格式，支持H264格式
• 🛡 支持Reactv18+版本

📦 安装

npm

npm install react-player-component --save

yarn

yarn add react-player-component

🔨 示例

import {ReactPlayer} from "react-player-component";
function App() {
  return (
    <>
      <ReactPlayer option={{
        videoSrc:"https://vjs.zencdn.net/v/oceans.mp4",
        crossOrigin:'anonymous',
        width:1000,
        height:600
      }}/>
    </>
  )
}

export default App

:blue_book: ​ 文档

属性/配置项

如下属性来自option属性配置项.

温馨提示：类型接口声明如下：:point_down:

export type CrossOrigin = 'anonymous' | 'use-credentials' | '' | undefined;

export interface QualityList {
    key: number;
    url: string;
    enName: string;
    zhName: string;
}
/**
 * @description 清晰度列表设置
 */
export interface QualityConfig {
    currentKey: number; // 当前清晰度
    qualityList: QualityList[];
}
/**
 * @description 暂停键位置
 */
export type PausePlacement = 'bottomRight' | 'center';
/**
 * @description 悬浮进度条位置
 */
export type ProgressFloatPosition = 'top' | 'bottom';
/**
 * @description 支持语言
 */
export type LanguageType = 'zh' | 'en';
/**
 * @description toast位置
 */
export type ToastPosition =
    | 'leftTop'
    | 'rightTop'
    | 'leftBottom'
    | 'rightBottom'
    | 'center';

方法

提示：如上方法要使用ref获取才能调用

/**
 * @description ref 获取的react-player对象
 */
useImperativeHandle(ref, () => ({
    videoElement: videoRef.current!,
    ...videoAttributes.current,
    ...videoMethod,  
}));

回调函数

如下属性来自callback属性配置项.

视频属性

/**
 * @description 视频播放属性
 */
export interface VideoAttributes {
    /**
     * @description 是否播放
     */
    isPlay: boolean;
    /**
     * @description 当前时间/s
     */
    currentTime: number;
    /**
     * @description 持续时间
     */
    duration: number;
    /**
     * @description 缓冲时间
     */
    bufferedTime: number;
    /**
     * @description 是否开启画中画
     */
    isPictureInPicture: boolean;
    /**
     * @description 音量
     */
    volume: number;
    /**
     * @description 是否静音
     */
    isMute: boolean;
    /**
     * @description 视频播放倍数
     */
    multiple: number;
    /**
     * @description 是否播放结束
     */
    isEnded: boolean;
    /**
     * @description 错误
     */
    error: string | undefined;
    /**
     * @description 暂停缓冲
     */
    isWaiting: boolean;
}

react-video-player接收的参数接口如下：:point_down:

export interface VideoProps {
    option: VideoPlayerOptions;
    callback?: Partial<VideoCallBack>; 
}

后序更新计划

• 更新PC端的按键快进、后退、暂停、播放等功能
• 更新全新的移动端逻辑、包括左边上划亮度提升、右边上划音量提升、右划快进、左划后退等逻辑