✨ 个性

  • 开箱即用的高质量 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}

地址

我的项目地址
预览地址