You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
RezaAshrafi77 636f3ae9aa speed 3 years ago
build JoL-player project init 3 years ago
example/src add video clarity, fix the black border bug of the video 3 years ago
src speed 3 years ago
.babelrc JoL-player project init 3 years ago
.editorconfig init-project 3 years ago
.eslintignore init-project 3 years ago
.eslintrc.js JoL-player project init 3 years ago
.gitignore JoL-player project init 3 years ago
.prettierignore init-project 3 years ago
.prettierrc init-project 3 years ago
LICENSE init-project 3 years ago
README.md update view andress 3 years ago
package-lock.json JoL-player project init 3 years ago
package.json add video clarity, fix the black border bug of the video 3 years ago
tsconfig.json JoL-player project init 3 years ago
yarn.lock speed 3 years ago
zh.md update view andress 3 years ago

README.md

JoL-player

Simple, beautiful and powerful react player

license react

English | 简体中文

Characteristics

  • 📦 High-quality React components out of the box.
  • 🛡 Use TypeScript to develop, provide a complete type definition file.
  • 🌍 Internationalized language support.
  • 🎨 Themes, components, customization capabilities.
  • 👊 Powerful API and callback function
  • Small size, 80kb

📦 Install

npm install jol-player --save

🔨 Example

import JoLPlayer from "jol-player";

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

👉demo case

📘 Documentation

Properties/Configuration Items

The following attributes come from the option property configuration item

Parameter Description type Default value
width The width of the video container (required) number required
height The height of the video container (required) number required
videoSrc Video address (required) string required
theme theme string #ffb821
poster Video cover image string -
setEndPlayContent Customize what is displayed at the end of the video React.ReactNode -
setBufferContent Custom video buffer loading component React.ReactNode -
pausePlacement The position of the pause button bottomRightcenter bottomRight
hideMouseTime How many milliseconds, without any operation, hide the mouse and controller/ms number 2000
isShowMultiple Whether to display the multiplier function boolean true
isShowSet Whether to display the setting function boolean true
isShowScreenshot Whether to display the screenshot function boolean true
isShowPicture Whether to show picture-in-picture boolean true
isShowWebFullScreen Whether to display the full screen of the webpage boolean true
language Language zhen zh
isShowPauseButton Whether to show the pause button boolean true
quality Selection list of video quality definition qualityAttributes[] -

Tips:qualityAttributes:The interface declaration is as follows👇

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

Name Description type
load Reload () => void
pause Pause () => void
play Start playing () => void
setVolume Set the volume, [0-100] (par:number ) => void
seek Set the playback position of the specified video/s (par:number ) => void
setVideoSrc Set the address to play the video src (par:string ) => void

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

👉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';
Name Description type
onProgressMouseDown Press and hold the slide bar, drag the callback (e: videoAttributes) => void
onProgressMouseUp Slide bar press and release callback (e: videoAttributes) => void
onPlay Video start playing callback (e: videoAttributes) => void
onPause Callback when the video is paused (e: videoAttributes) => void
onTimeChange Video is playing, time change callback (e: videoAttributes) => void
onEndEd Callback when the video ends (e: videoAttributes) => void
onvolumechange Callback when the volume changes (e: videoAttributes) => void
onError Video playback failed callback () => void
onQualityChange Callback when the video resolution changes (e: videoAttributes) => void

The parameter interface received by JoLPlayer is as follows: 👇

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

🌹Praise

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

🏰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