{"_id":"@byteseek/jol-player","name":"@byteseek/jol-player","dist-tags":{"latest":"4.0.0"},"versions":{"4.0.0":{"name":"@byteseek/jol-player","version":"4.0.0","description":"简洁，美观，功能强大的react播放器，simple and beautiful, powerful react player","main":"index.js","scripts":{"build":"npm run clear && webpack --config ./build/webpack.prod.config.js","start":"webpack-dev-server  --inline --config ./build/webpack.dev.config.js","clear":"rimraf dist","publish":"npm run build && cd ./dist && npm publish"},"keywords":["lgf","react-video","video","player","react","react-components","JoL-player"],"author":{"name":"lgf"},"license":"MIT","bugs":{"url":"https://github.com/lgf196/JoL-player/issues"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"homepage":"https://github.com/lgf196/JoL-player","devDependencies":{"@babel/core":"^7.6.4","@babel/preset-env":"^7.6.3","@babel/preset-react":"^7.6.3","@babel/preset-typescript":"^7.15.0","@types/react":"^18.0.8","@types/react-dom":"^18.0.3","@types/webpack-env":"^1.16.2","@typescript-eslint/eslint-plugin":"^4.29.2","@typescript-eslint/parser":"^4.29.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^3.0.0","copy-webpack-plugin":"^6.4.1","css-loader":"^3.2.0","eslint":"^7.32.0","eslint-config-react-app":"^6.0.0","eslint-loader":"^4.0.2","eslint-plugin-flowtype":"^5.9.0","eslint-plugin-import":"^2.24.1","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.24.0","eslint-plugin-react-hooks":"^4.2.0","file-loader":"^4.2.0","fork-ts-checker-webpack-plugin":"^6.3.2","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.8.0","rimraf":"^3.0.2","sass":"^1.32.13","sass-loader":"^10.2.0","style-loader":"^1.0.0","svg-sprite-loader":"^6.0.9","typescript":"^4.3.5","uglifyjs-webpack-plugin":"^2.2.0","url-loader":"^2.2.0","validate-commit-msg":"^2.14.0","webpack":"^4.41.1","webpack-cli":"^3.3.9","webpack-dev-server":"^3.8.2","webpack-merge":"^4.2.2"},"dependencies":{"core-js":"^2.6.10","hls.js":"^1.0.11","react":"^18.1.0","react-dom":"^18.1.0","screenfull":"^5.0.0"},"_id":"@byteseek/jol-player@4.0.0","types":"./index.d.ts","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-IIDXYudINdM3Khw4kPOD7U+bhycVJulcnnTASxQ0/ydmL3Wy7puWYI2AcQlWclvO0YsI627laP5YDWpCQcvaFA==","shasum":"1fab42df58cfda7e716ae3bd91132ced2c374519","tarball":"https://registry.npmjs.org/@byteseek/jol-player/-/jol-player-4.0.0.tgz","fileCount":5,"unpackedSize":547578,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFrKWBdZgkl1dFT2wee8u1OM7vlyKIRSBXffqQa7ipglAiEAp9dUttyTbon7f75RBIGLpKgA0gqa0P8wdUi08cxxCvQ="}]},"_npmUser":{"name":"feng524822","email":"822481516@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/jol-player_4.0.0_1719415962996_0.9387290008347375"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-26T15:32:42.892Z","4.0.0":"2024-06-26T15:32:43.279Z","modified":"2024-06-26T15:32:43.570Z"},"maintainers":[{"name":"feng524822","email":"822481516@qq.com"}],"description":"简洁，美观，功能强大的react播放器，simple and beautiful, powerful react player","homepage":"https://github.com/lgf196/JoL-player","keywords":["lgf","react-video","video","player","react","react-components","JoL-player"],"author":{"name":"lgf"},"bugs":{"url":"https://github.com/lgf196/JoL-player/issues"},"license":"MIT","readme":"<p align=\"center\">\r\n  <img src=\"https://cdn.gudsen.com/2021/08/31/11f7398259634e94bddb8b0d9d7506c8.png\">\r\n</p>\r\n\r\n\r\n\r\n\r\n<h1 align=\"center\">JoL-player</h1>\r\n\r\n<p align=\"center\">Simple, beautiful and powerful react player</p>\r\n\r\n<p align=\"center\">\r\n     <a href=\"https://github.com/microsoft/TypeScript\">\r\n    <img src=\"https://img.shields.io/badge/typescript-4.4.2-brightgreen.svg\" alt=\"license\">\r\n  </a>\r\n  <a href=\"https://github.com/facebook/react\">\r\n    <img src=\"https://img.shields.io/badge/react-18.1.0-brightgreen.svg\" alt=\"react\">\r\n  </a>\r\n</p>\r\n\r\n\r\n\r\nEnglish | [简体中文](./zh.md)\r\n\r\n## ✨ Characteristics\r\n\r\n- 📦 High-quality React components out of the box.\r\n- 🛡 Use TypeScript to develop, provide a complete type definition file.\r\n- 🌍 Internationalized language support.\r\n- 🎨 Themes, components, customization capabilities.\r\n- :facepunch: Powerful API and callback function\r\n- :zap: Small size, 80kb\r\n-  :gem: Support `HLS` format (m3u8) etc.\r\n-  🛡 support React`v18+`Version\r\n\r\n## 📦 Install\r\n#### npm\r\n```bash\r\nnpm install jol-player --save\r\n```\r\n#### yarn\r\n```bash\r\nyarn add jol-player \r\n```\r\n#### `<script>` tag introduction\r\n\r\n```bash\r\nhttps://cdn.jsdelivr.net/npm/jol-player@3.0.0/index.min.js\r\n\r\n// Introduced in the `typescript` environment\r\nhttps://cdn.jsdelivr.net/npm/jol-player@3.0.0/index.d.ts\r\n```\r\n\r\n## 🔨 Example\r\n\r\n```tsx\r\nimport {JolPlayer} from \"jol-player\";\r\n\r\nconst App = () => (\r\n  <>\r\n    <JolPlayer\r\n        option={{\r\n          videoSrc:\"https://x.com/a.mp4\",\r\n          width: 750,\r\n          height: 420,\r\n        }}\r\n      />\r\n  </>\r\n);\r\n```\r\n\r\n:point_right:[demo case](https://codesandbox.io/s/bold-night-i9vy4?file=/src/App.tsx)\r\n\r\n## :blue_book:  Documentation\r\n\r\n#### Properties/Configuration Items\r\n\r\nThe following attributes come from the `option` property configuration item\r\n\r\n| Parameter           | Description                                                  | type                      | Default value |\r\n| ------------------- | ------------------------------------------------------------ | ------------------------- | ------------- |\r\n| videoSrc            | Video address (**required**)                                 | `string`                  | required      |\r\n| 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` |\r\n| height              | The height of the video container             | `number`                  | -     |\r\n| width               | The width of the video container                  | `number`                  | -     |\r\n| autoPlay | Video autoplay | `boolean` | false |\r\n| theme               | theme                                                        | `string`                  | \\#ffb821      |\r\n| poster              | Video cover image                                            | `string`                  | -             |\r\n| setEndPlayContent   | Customize what is displayed at the end of the video          | `React.ReactNode`         | -             |\r\n| setBufferContent    | Custom video buffer loading component                        | `React.ReactNode`         | -             |\r\n| setPauseButtonContent | Custom video pause button | `React.ReactNode` | - |\r\n| pausePlacement      | The position of the pause button                             | `bottomRight`，`center` | `bottomRight` |\r\n| hideMouseTime       | How many milliseconds, without any operation, hide the mouse and controller/ms | `number`                  | 2000          |\r\n| isShowMultiple      | Whether to display the multiplier function                   | `boolean`                 | true          |\r\n| isShowSet           | Whether to display the setting function                      | `boolean`                 | true          |\r\n| isShowScreenshot    | Whether to display the screenshot function                   | `boolean`                 | true          |\r\n| isShowPicture       | Whether to show picture-in-picture                           | `boolean`                 | true          |\r\n| isShowWebFullScreen | Whether to display the full screen of the webpage            | `boolean`                 | true          |\r\n| language            | Language                                                     | `zh`， `en`               | `zh`          |\r\n| isShowPauseButton | Whether to show the pause button | `boolean` | true |\r\n| quality | Selection list of video quality definition | `qualityAttributes[]` | - |\r\n| videoType | Video playback format, supports h264(`.mp4`,`.webm`,`.ogg`), hls(`.m3u8`) | `h264` `hls` | `h264` |\r\n| isToast | Whether to show toast | `boolean` | false |\r\n| toastPosition | The position of the toast, this value only has an effect when `isToast` is true | `leftTop`,`rightTop`,`leftBottom`,`rightBottom`,`center` | `leftTop` |\r\n| isProgressFloat | Whether to display the progress bar floating layer prompt | `boolean` | false |\r\n| progressFloatPosition | The position of the floating layer prompt of the progress bar. This value is effective only when `isProgressFloat `is true | `tp`,`bt` | `bt` |\r\n\r\n> Tips：`qualityAttributes`：The interface declaration is as follows:point_down:\r\n>\r\n> ```typescript\r\n> /**\r\n>  * 360P SD\r\n>  * 540P HD\r\n>  * 720P FHD\r\n>  * 1080P BD\r\n>  */\r\n> export type qualityName = 'SD' | 'HD' | 'FHD' | 'BD';\r\n> \r\n> export type qualityKey = '360P' | '540P' | '720P' | '1080P';\r\n> \r\n> export interface qualityAttributes<T = qualityName> {\r\n>   name: T;\r\n>   url: string;\r\n> }\r\n> ```\r\n>\r\n> \r\n\r\n#### Method\r\n\r\n| Name        | Description                                        | type                    |\r\n| ----------- | -------------------------------------------------- | ----------------------- |\r\n| load        | Reload                                             | () => void              |\r\n| pause       | Pause                                              | () => void              |\r\n| play        | Start playing                                      | () => void              |\r\n| setVolume   | Set the volume, [0-100]                            | (par:`number` ) => void |\r\n| seek        | Set the playback position of the specified video/s | (par:`number` ) => void |\r\n| setVideoSrc | Set the address to play the video src              | (par:`string` ) => void |\r\n\r\n`Hint：`The above method requires the help of`ref`Can call，as：xxx.current.load()\r\n\r\n:point_right:[For details, please refer to the demo case](https://codesandbox.io/s/bold-night-i9vy4?file=/src/App.tsx)\r\n\r\n#### Callback function\r\n\r\n```tsx\r\nexport interface videoAttributes<T = number, K = boolean> {\r\n  /**\r\n   * @description Whether to play\r\n   */\r\n  isPlay: K;\r\n  /**\r\n   * @description Current time/s\r\n   */\r\n  currentTime: T;\r\n  /**\r\n   * @description Total time\r\n   */\r\n  duration: T;\r\n  /**\r\n   * @description Cache duration/s\r\n   */\r\n  bufferedTime: T;\r\n  /**\r\n   * @description Whether to open picture-in-picture\r\n   */\r\n  isPictureinpicture: K;\r\n  /**\r\n   * @description Volume\r\n   */\r\n  volume: T;\r\n  /**\r\n   * @description Video playback multiple\r\n   */\r\n  multiple: T;\r\n  /**\r\n   * @description Whether to end\r\n   */\r\n  isEndEd: K;\r\n  /**\r\n   * @description Wrong\r\n   */\r\n  error: null | T;\r\n}\r\nexport type qualityKey = '360P' | '540P' | '720P' | '1080P';\r\n```\r\n\r\n| Name                | Description                                     | type                                     |\r\n| ------------------- | ----------------------------------------------- | ---------------------------------------- |\r\n| onProgressMouseDown | Press and hold the slide bar, drag the callback | (e: videoAttributes) => void             |\r\n| onProgressMouseUp   | Slide bar press and release callback            | (e: videoAttributes) => void             |\r\n| onPlay              | Video start playing callback                    | (e: videoAttributes) => void             |\r\n| onPause             | Callback when the video is paused               | (e: videoAttributes) => void             |\r\n| onTimeChange        | Video is playing, time change callback          | (e: videoAttributes) => void             |\r\n| onEndEd             | Callback when the video ends                    | (e: videoAttributes) => void             |\r\n| onvolumechange      | Callback when the volume changes                | (e: videoAttributes) => void             |\r\n| onError             | Video playback failed callback                  | () => void                               |\r\n| onQualityChange     | Callback when the video resolution changes      | (e: videoAttributes<qualityKey>) => void |\r\n\r\n#### The parameter interface received by `JoLPlaye`r is as follows: :point_down:\r\n\r\n``` tsx\r\nexport interface videoparameter extends Partial<videoCallback> {\r\n  style?: React.CSSProperties;\r\n  /**\r\n   * @description Component configuration items\r\n   */\r\n  option: videoOption;\r\n  className?: string;\r\n  ref?: JoLPlayerRef\r\n}\r\n```\r\n## :rose:Praise\r\n\r\nIf you think this project is helpful to you, you can give the author a like, the author is very grateful: blush::blush::rose:\r\n\r\n##  :european_castle:Ecosphere\r\n\r\n1.  [ant-simple-pro](https://github.com/lgf196/ant-simple-pro)One support[vue3.0](https://github.com/vuejs/vue)，[react](https://github.com/facebook/react)，[angular](https://github.com/angular/angular)，[typescript](https://github.com/microsoft/TypeScript)Front-end solutions for middle-end platforms supported by multiple frameworks.\r\n2.  [ant-simple-draw](https://github.com/lgf196/ant-simple-draw)An online graphic editor, commonly used to express business processes, etc.\r\n3.  [h5-Dooring](https://github.com/MrXujiang/h5-Dooring) Make H5 production as simple as building blocks, easily build H5 pages, H5 websites, PC-side websites, and visual design\r\n\r\n[MIT](https://github.com/lgf196/ant-simple-pro/blob/master/LICENSE)\r\n\r\nCopyright (c) 2021-present LiGuoFeng\r\n","readmeFilename":"README.md"}