A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/lgf196/JoL-player below:

lgf196/JoL-player: simple and beautiful, powerful react player

Simple, beautiful and powerful react player

English | 简体中文

npm install jol-player --save
<script> tag introduction 
https://cdn.jsdelivr.net/npm/jol-player@3.0.0/index.min.js

// Introduced in the `typescript` environment
https://cdn.jsdelivr.net/npm/jol-player@3.0.0/index.d.ts
import {JolPlayer} from "jol-player";

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

👉demo case

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

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
}

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

  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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4