关于javascript:一款使用typescript开发的react播放器插件

✨ 个性

• 开箱即用的高质量 React 组件。
• 应用 TypeScript 开发，提供残缺的类型定义文件。
• 国际化语言反对。
• 主题，组件，定制能力。
• 弱小的 API 和回调函数
• 体积小，80kb​
• 反对 HLS（.m3u8）格局，反对H264 格局

📦 装置

npm install jol-player --save

🔨 示例

import JoLPlayer from "jol-player";
const App = () => (
  <>
    <JoLPlayer
        option={{
          videoSrc:"https://x.com/a.mp4",
          width: 750,
          height: 420,
        }}
      />
  </>
);

demo 案例

文档

属性 / 配置项

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

舒适提醒：qualityAttributes接口申明如下：

/**
 * 标清 360P SD
 * 高清 540P HD
 * 超清 720P FHD
 * 蓝光 1080P BD
 */
export type qualityName = 'SD' | 'HD' | 'FHD' | 'BD';

export type qualityKey = '360P' | '540P' | '720P' | '1080P';

export interface qualityAttributes<T = qualityName> {
  name: T;
  url: string;
}

办法

提醒：如上办法要借助 ref 能力调用，如：xxx.current.load()

具体请参看，demo 案例

回调函数

export interface videoAttributes<T = number, K = boolean> {
  /**
   * @description 是否播放
   */
  isPlay: K;
  /**
   * @description 以后工夫 /s
   */
  currentTime: T;
  /**
   * @description 总时长
   */
  duration: T;
  /**
   * @description 缓存时长 /s
   */
  bufferedTime: T;
  /**
   * @description 是否开启画中画
   */
  isPictureinpicture: K;
  /**
   * @description 音量
   */
  volume: T;
  /**
   * @description 视频播放倍数
   */
  multiple: T;
  /**
   * @description 是否完结
   */
  isEndEd: K;
  /**
   * @description 谬误
   */
  error: null | T;
}

export type qualityKey = '360P' | '540P' | '720P' | '1080P';

JoLPlaye r 接管的参数接口如下：

export interface videoparameter extends Partial<videoCallback> {
  style?: React.CSSProperties;
  /**
   * @description 组件的配置项
   */
  option: videoOption;
  className?: string;
  ref?: JoLPlayerRef
}

地址

我的项目地址
预览地址