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

| 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()

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

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