jol-player，从需求到开源发布，一款轻量级，功能强大的react播放器，支持react最新版本(18+)

背景

公司最近要做一个学习平台,并且是要包含视频的,而且视频的样式要求符合该项目的主题，对于我这个没有音视频开发经验的新手来说,有点小难度哈，不过这点难度，算不了什么，用雷军的话来说；‘生死看淡，不服就干’。

梳理需求

要有常见的功能，全屏，暂停，快进，音量，倍数等等功能
样式要美观，符合该项目整个风格
视频可控性要强针对如上等需求，我开始了探索，原生video标签肯定是不行的，但是肯定要用它来做为基础开发的，我看了下，腾讯视频，B站，优酷等播放器，发现大部分的功能都差不多，B站的功能可能多点，但常用的功能都差不多。

我们这个项目的技术栈主要是ts，react，所以我去react社区找了一下video相对应的组件或者插件，发现使用频率较高的是video-react，Dplayer.js，video.js等，但这些组件和插件虽然很强大，功能丰富，但还是不太符合我们项目，而且对ts的支持很差，video-react甚至直接停止维护了，再就是这些播放器样式太丑，图标不够突出，更腾讯视频，B站等播放器比起来，你会觉得太low了，网上样式好看的，功能强大的，符合自已项目的插件，简直找不到，这条路算是彻底的断了，开启自已写播放器的道路。

设计阶段

播放器框架图如下
技术栈

typescript，react，webpack，babel，视频播放器就采用ts，react开发，不借助任何第三方插件，轻量简洁。

思路采用react中的hooks进行编写，useReducer+createContext实现模拟redux进行全局数据流传递，大概的思路流程如下图：

使用简介 + 快速上手

`jol-player`项目地址，体验地址.

✨ 特性

📦 开箱即用的高质量 React 组件。
🛡 使用 TypeScript 开发，提供完整的类型定义文件。
🌍 国际化语言支持。
🎨 主题，组件，定制能力。
👊 强大的 API 和回调函数
⚡ 体积小，80kb
⚡ 支持react最新版本18+

下载

因为我们是把项目上传到了npm方便其他项目用，所以可以直接从 npm 上下载。

npm install jol-player --save

使用

import JoLPlayer from "jol-player";

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

基本用法如下属性来自option属性配置项.

参数	说明	类型	默认值
videoSrc	视频地址（必传）	`string`	必传
mode	视频缩放模式	`scaleToFill`(不保持纵横比缩放) `widthFix`(宽度固定，高度自动变化，保持原视频宽高比不变) `heightFix`(高度固定，宽度自动变化，保持原视频宽高比不变-)	`scaleToFill`
height	视频容器的 height	`number`	-
width	视频容器的 width	`number`	-
autoPlay	自动播放	`boolean`	false
theme	主题	`string`	#ffb821
poster	视频封面图	`string`	-
setEndPlayContent	自定义视频结束时显示的内容	`React.ReactNode`	-
setBufferContent	自定义视频缓冲加载组件	`React.ReactNode`	-
setPauseButtonContent	自定义视频暂停键	`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;
}

2 方法

名称	说明	类型
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;
}

名称	说明	类型
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

👉具体请参看，demo案例

jol-player接收的参数接口如下：👇

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

🌹赞赏

如果您认为该项目对您有所帮助，则可以给作者一个赞，作者非常感激😊😊🌹

同时，笔者的ant-simple-pro项目也在持续的更新中，其中已经将vue(vue3)版本中的webpack构建全部换成了vite，react版本也会升级18+和vite，尽请期待。