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

5次阅读

共计 2644 个字符，预计需要花费 7 分钟才能阅读完成。

开箱即用的高质量 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`,`center`	`bottomRight`
hideMouseTime	多少毫秒，无任何操作，暗藏鼠标和控制器 /ms	`number`	2000
isShowMultiple	是否显示播放倍数性能	`boolean`	true
isShowSet	是否显示设置性能	`boolean`	true
isShowScreenshot	是否显示截图性能	`boolean`	true
isShowPicture	是否显示画中画	`boolean`	true
isShowWebFullScreen	是否显示网页全屏	`boolean`	true
language	语言	`zh`,`en`	`zh`
isShowPauseButton	是否显示暂停键	`boolean`	true
quality	视频品质清晰度的抉择列表	`qualityAttributes[]`	–
videoType	视频播放格局，反对 h264(`.mp4`,`.webm`,`.ogg`)，hls(`.m3u8`)	`h264`,`hls`	`h264`
isToast	是否显示 toast	`boolean`	false
toastPosition	toast 的地位，此值只有 `isToast` 为 true 时，才有成果	`leftTop`,`rightTop`,`leftBottom`,`rightBottom`,`center`	`leftTop`
isProgressFloat	是否显示进度条浮层提醒	`boolean`	false
progressFloatPosition	进度条浮层提醒的地位，此值只有`isProgressFloa` t 为 true 时，才有成果	`tp`,`bt`	`bt`

舒适提醒：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

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

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

我的项目地址
预览地址

正文完