simple and beautiful, powerful react player

This content originally appeared on DEV Community and was authored by lgf196

`jol-player`project address，Experience address

✨ 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	`bottomRight`	`center`
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`

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

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

The parameter interface received by `JoLPlaye`r 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:??

This content originally appeared on DEV Community and was authored by lgf196

Print Share Comment Cite Upload Translate Updates

APA

lgf196 | Sciencx (2021-08-26T10:26:20+00:00) simple and beautiful, powerful react player. Retrieved from https://www.scien.cx/2021/08/26/simple-and-beautiful-powerful-react-player/

MLA

" » simple and beautiful, powerful react player." lgf196 | Sciencx - Thursday August 26, 2021, https://www.scien.cx/2021/08/26/simple-and-beautiful-powerful-react-player/

HARVARD

lgf196 | Sciencx Thursday August 26, 2021 » simple and beautiful, powerful react player., viewed ,<https://www.scien.cx/2021/08/26/simple-and-beautiful-powerful-react-player/>

VANCOUVER

lgf196 | Sciencx - » simple and beautiful, powerful react player. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/26/simple-and-beautiful-powerful-react-player/

CHICAGO

" » simple and beautiful, powerful react player." lgf196 | Sciencx - Accessed . https://www.scien.cx/2021/08/26/simple-and-beautiful-powerful-react-player/

IEEE

" » simple and beautiful, powerful react player." lgf196 | Sciencx [Online]. Available: https://www.scien.cx/2021/08/26/simple-and-beautiful-powerful-react-player/. [Accessed: ]

rf:citation

» simple and beautiful, powerful react player | lgf196 | Sciencx | https://www.scien.cx/2021/08/26/simple-and-beautiful-powerful-react-player/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

jol-playerproject address，Experience address