JoL-player

简洁,美观,功能强大的react播放器

license react

简体中文 | [English](./README.md) ## ✨ 特性 - 📦 开箱即用的高质量 React 组件。 - 🛡 使用 TypeScript 开发,提供完整的类型定义文件。 - 🌍 国际化语言支持。 - 🎨 主题,组件,定制能力。 - :facepunch: 强大的 API 和回调函数 - :zap: 体积小,80kb​ ## 📦 安装 ```bash npm install jol-player --save ``` ## 🔨 示例 ```tsx import JoLPlayer from "jol-player"; const App = () => ( <> ); ``` :point_right:[demo案例](https://codesandbox.io/s/inspiring-hawking-g5ukb?file=/src/App.tsx) ## :blue_book: ​ 文档 #### 属性/配置项 如下属性来自`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[]` | - | > 温馨提示:`qualityAttributes`接口声明如下::point_down: > > ```typescript > /** > * 标清 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 { > 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() :point_right:[具体请参看,demo案例](https://codesandbox.io/s/inspiring-hawking-g5ukb?file=/src/App.tsx) #### 回调函数 ```typescript export interface videoAttributes { /** * @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)=> void | #### `JoLPlaye`r接收的参数接口如下::point_down: ``` tsx export interface videoparameter extends Partial { style?: React.CSSProperties; /** * @description 组件的配置项 */ option: videoOption; className?: string; ref?: JoLPlayerRef } ``` ## :rose:赞赏 如果您认为该项目对您有所帮助,则可以给作者一个赞,作者非常感激:blush::blush::rose: ## 扫如下码,进行bug提问,和学习交流。

## :european_castle:生态圈 1. [ant-simple-pro](https://github.com/lgf196/ant-simple-pro)一款支持[vue3.0](https://github.com/vuejs/vue),[react](https://github.com/facebook/react),[angular](https://github.com/angular/angular),[typescript](https://github.com/microsoft/TypeScript)等多框架支持的中台前端解决方案 2. [ant-simple-draw](https://github.com/lgf196/ant-simple-draw)一款在线图解编辑器,常用用于表示业务流程等 3. [h5-Dooring](https://github.com/MrXujiang/h5-Dooring) 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站, 可视化设计 [MIT](https://github.com/lgf196/ant-simple-pro/blob/master/LICENSE) Copyright (c) 2021-present LiGuoFeng