乐趣区

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

jiezi

✨ 个性

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

地址

我的项目地址
预览地址

退出移动版