JoL-player

Simple, beautiful and powerful react player

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
• 💎 Support HLS format (m3u8) etc.
• 🛡 support Reactv18+Version

📦 Install

npm

npm install jol-player --save

yarn

yarn add jol-player 

<script> tag introduction

https://cdn.jsdelivr.net/npm/[email protected]/index.min.js

// Introduced in the `typescript` environment
https://cdn.jsdelivr.net/npm/[email protected]/index.d.ts

🔨 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
videoSrc	Video address (required)	string	required
mode	Video zoom mode	scaleToFill(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
height	The height of the video container	number	-
width	The width of the video container	number	-
autoPlay	Video autoplay	boolean	false
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	-
setPauseButtonContent	Custom video pause button	React.ReactNode	-
pausePlacement	The position of the pause button	bottomRight，center	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	zh， en	zh
isShowPauseButton	Whether to show the pause button	boolean	true
quality	Selection list of video quality definition	qualityAttributes[]	-
videoType	Video playback format, supports h264(.mp4,.webm,.ogg), hls(.m3u8)	h264 hls	h264
isToast	Whether to show toast	boolean	false
toastPosition	The position of the toast, this value only has an effect when isToast is true	leftTop,rightTop,leftBottom,rightBottom,center	leftTop
isProgressFloat	Whether to display the progress bar floating layer prompt	boolean	false
progressFloatPosition	The position of the floating layer prompt of the progress bar. This value is effective only when isProgressFloat is true	tp,bt	bt

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

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::blush::rose:

🏰Ecosphere

1. ant-simple-proOne supportvue3.0，react，angular，typescriptFront-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