Home

Awesome

<p align="center"> <img src="https://cdn.gudsen.com/2021/08/31/11f7398259634e94bddb8b0d9d7506c8.png"> </p> <h1 align="center">JoL-player</h1> <p align="center">Simple, beautiful and powerful react player</p> <p align="center"> <a href="https://github.com/microsoft/TypeScript"> <img src="https://img.shields.io/badge/typescript-4.4.2-brightgreen.svg" alt="license"> </a> <a href="https://github.com/facebook/react"> <img src="https://img.shields.io/badge/react-18.1.0-brightgreen.svg" alt="react"> </a> </p>

English | 简体中文

✨ Characteristics

📦 Install

npm

npm install jol-player --save

yarn

yarn add jol-player 

<script> tag introduction

https://cdn.jsdelivr.net/npm/jol-player@3.0.0/index.min.js

// Introduced in the `typescript` environment
https://cdn.jsdelivr.net/npm/jol-player@3.0.0/index.d.ts

🔨 Example

import {JolPlayer} from "jol-player";

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

:point_right:demo case

:blue_book: Documentation

Properties/Configuration Items

The following attributes come from the option property configuration item

ParameterDescriptiontypeDefault value
videoSrcVideo address (required)stringrequired
modeVideo zoom modescaleToFill(Does not maintain the aspect ratio to scale the video),widthFix(The width is unchanged, and the height changes automatically, keeping the aspect ratio of the original video unchanged),heightFix(When the height is unchanged, the width changes automatically, keeping the aspect ratio of the original video unchanged)scaleToFill
heightThe height of the video containernumber-
widthThe width of the video containernumber-
autoPlayVideo autoplaybooleanfalse
themethemestring#ffb821
posterVideo cover imagestring-
setEndPlayContentCustomize what is displayed at the end of the videoReact.ReactNode-
setBufferContentCustom video buffer loading componentReact.ReactNode-
setPauseButtonContentCustom video pause buttonReact.ReactNode-
pausePlacementThe position of the pause buttonbottomRightcenterbottomRight
hideMouseTimeHow many milliseconds, without any operation, hide the mouse and controller/msnumber2000
isShowMultipleWhether to display the multiplier functionbooleantrue
isShowSetWhether to display the setting functionbooleantrue
isShowScreenshotWhether to display the screenshot functionbooleantrue
isShowPictureWhether to show picture-in-picturebooleantrue
isShowWebFullScreenWhether to display the full screen of the webpagebooleantrue
languageLanguagezhenzh
isShowPauseButtonWhether to show the pause buttonbooleantrue
qualitySelection list of video quality definitionqualityAttributes[]-
videoTypeVideo playback format, supports h264(.mp4,.webm,.ogg), hls(.m3u8)h264 hlsh264
isToastWhether to show toastbooleanfalse
toastPositionThe position of the toast, this value only has an effect when isToast is trueleftTop,rightTop,leftBottom,rightBottom,centerleftTop
isProgressFloatWhether to display the progress bar floating layer promptbooleanfalse
progressFloatPositionThe position of the floating layer prompt of the progress bar. This value is effective only when isProgressFloat is truetp,btbt

Tips:qualityAttributes:The interface declaration is as follows:point_down:

/**
 * 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;
}

Method

NameDescriptiontype
loadReload() => void
pausePause() => void
playStart playing() => void
setVolumeSet the volume, [0-100](par:number ) => void
seekSet the playback position of the specified video/s(par:number ) => void
setVideoSrcSet the address to play the video src(par:string ) => void

Hint:The above method requires the help ofrefCan call,as:xxx.current.load()

:point_right:For details, please refer to the demo case

Callback function

export interface videoAttributes<T = number, K = boolean> {
  /**
   * @description Whether to play
   */
  isPlay: K;
  /**
   * @description Current time/s
   */
  currentTime: T;
  /**
   * @description Total time
   */
  duration: T;
  /**
   * @description Cache duration/s
   */
  bufferedTime: T;
  /**
   * @description Whether to open picture-in-picture
   */
  isPictureinpicture: K;
  /**
   * @description Volume
   */
  volume: T;
  /**
   * @description Video playback multiple
   */
  multiple: T;
  /**
   * @description Whether to end
   */
  isEndEd: K;
  /**
   * @description Wrong
   */
  error: null | T;
}
export type qualityKey = '360P' | '540P' | '720P' | '1080P';
NameDescriptiontype
onProgressMouseDownPress and hold the slide bar, drag the callback(e: videoAttributes) => void
onProgressMouseUpSlide bar press and release callback(e: videoAttributes) => void
onPlayVideo start playing callback(e: videoAttributes) => void
onPauseCallback when the video is paused(e: videoAttributes) => void
onTimeChangeVideo is playing, time change callback(e: videoAttributes) => void
onEndEdCallback when the video ends(e: videoAttributes) => void
onvolumechangeCallback when the volume changes(e: videoAttributes) => void
onErrorVideo playback failed callback() => void
onQualityChangeCallback when the video resolution changes(e: videoAttributes<qualityKey>) => void

The parameter interface received by JoLPlayer is as follows: :point_down:

export interface videoparameter extends Partial<videoCallback> {
  style?: React.CSSProperties;
  /**
   * @description Component configuration items
   */
  option: videoOption;
  className?: string;
  ref?: JoLPlayerRef
}

:rose:Praise

If you think this project is helpful to you, you can give the author a like, the author is very grateful: blush::blush::rose:

:european_castle:Ecosphere

  1. ant-simple-proOne supportvue3.0reactangulartypescriptFront-end solutions for middle-end platforms supported by multiple frameworks.
  2. ant-simple-drawAn online graphic editor, commonly used to express business processes, etc.
  3. h5-Dooring Make H5 production as simple as building blocks, easily build H5 pages, H5 websites, PC-side websites, and visual design

MIT

Copyright (c) 2021-present LiGuoFeng