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.
• :facepunch: Powerful API and callback function
• :zap: Small size, 80kb
• :gem: 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,
        }}
      />
  </>
);

:point_right:demo case

:blue_book: Documentation

Properties/Configuration Items

The following attributes come from the option property configuration item

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

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

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.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