头图

一款使用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属性配置项.

参数说明类型默认值
width视频容器的 width(必传)number必传
height视频容器的 height(必传)number必传
videoSrc视频地址(必传)string必传
theme主题string\#ffb821
poster视频封面图string-
setEndPlayContent自定义视频结束时显示的内容React.ReactNode-
setBufferContent自定义视频缓冲加载组件React.ReactNode-
pausePlacement暂停键的位置bottomRight,centerbottomRight
hideMouseTime多少毫秒,无任何操作,隐藏鼠标和控制器/msnumber2000
isShowMultiple是否显示播放倍数功能booleantrue
isShowSet是否显示设置功能booleantrue
isShowScreenshot是否显示截图功能booleantrue
isShowPicture是否显示画中画booleantrue
isShowWebFullScreen是否显示网页全屏booleantrue
language语言zh,enzh
isShowPauseButton是否显示暂停键booleantrue
quality视频质量清晰度的选择列表qualityAttributes[]-
videoType视频播放格式,支持h264(.mp4,.webm,.ogg),hls(.m3u8)h264,hlsh264
isToast是否显示toastbooleanfalse
toastPositiontoast的位置,此值只有isToast为true时,才有效果leftTop,rightTop,leftBottom,rightBottom,centerleftTop
isProgressFloat是否显示进度条浮层提示booleanfalse
progressFloatPosition进度条浮层提示的位置,此值只有isProgressFloat为true时,才有效果tp,btbt
温馨提示: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;
}

方法

名称说明类型
load重新加载() => void
pause暂停() => void
play开始播放() => void
setVolume设置音量,[0-100](par:number ) => void
seek设置指定视频的播放位置/s(par:number ) => void
setVideoSrc设置播放视频的地址 src(par:string ) => void

提示:如上方法要借助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';
名称说明类型
onProgressMouseDown滑动条按下不放,拖动回调(e: videoAttributes) => void
onProgressMouseUp滑动条按下松开回调(e: videoAttributes) => void
onPlay视频开始播放回调(e: videoAttributes) => void
onPause视频暂停播放的回调(e: videoAttributes) => void
onTimeChange视频在播放,时间变化回调(e: videoAttributes) => void
onEndEd视频结束时回调(e: videoAttributes) => void
onvolumechange音量改变时的回调(e: videoAttributes) => void
onError视频播放失败的回调() => void
onQualityChange视频清晰度改变时的回调(e:callBackType<qualityKey>)=> void

JoLPlayer接收的参数接口如下:

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

地址

项目地址
预览地址

阅读 69
8 声望
1 粉丝
0 条评论
你知道吗?

8 声望
1 粉丝
宣传栏