{"id":22155698,"url":"https://github.com/easy-martin/lm-player","last_synced_at":"2025-10-24T11:48:47.306Z","repository":{"id":57313274,"uuid":"182364090","full_name":"Easy-Martin/lm-player","owner":"Easy-Martin","description":"html5 player for React , support flv and m3u8,","archived":false,"fork":false,"pushed_at":"2024-05-31T09:02:15.000Z","size":41594,"stargazers_count":7,"open_issues_count":3,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-14T14:56:56.637Z","etag":null,"topics":["flv","m3u8","player","react","video"],"latest_commit_sha":null,"homepage":"https://easy-martin.github.io/lm-player/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Easy-Martin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-20T05:25:05.000Z","updated_at":"2024-04-17T08:58:07.000Z","dependencies_parsed_at":"2024-05-31T09:35:17.369Z","dependency_job_id":"6a1f0c21-3adc-4208-a18f-5bbbdf65cb85","html_url":"https://github.com/Easy-Martin/lm-player","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Easy-Martin%2Flm-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Easy-Martin%2Flm-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Easy-Martin%2Flm-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Easy-Martin%2Flm-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Easy-Martin","download_url":"https://codeload.github.com/Easy-Martin/lm-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227657695,"owners_count":17800010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flv","m3u8","player","react","video"],"created_at":"2024-12-02T02:19:31.186Z","updated_at":"2025-10-24T11:48:42.267Z","avatar_url":"https://github.com/Easy-Martin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 说明\n\n\u003e 基于[mpegts.js](https://github.com/xqq/mpegts.js)和[hls.js](https://github.com/video-dev/hls.js)封装`React`视频组件，基于`canvas`模拟逐帧播放\n\n```javascript\nimport { Player, HistoryPlayer } from 'lm-player';\n```\n\n| Component/Factory | description                  |\n| ----------------- | ---------------------------- |\n| `Player`          | 视频组件，适用于 `React`     |\n| `HistoryPlayer`   | 历史视频组件，适用于 `React` |\n\n# 安装\n\n```javascript\n\nyarn add lm-player\n//or\nnpm i lm-player\n\n```\n\n# 例子\n\n```ts\n//React simple demo\nimport { Player } from 'lm-player';\nReactDOM.render(\u003cPlayer fpsDelay={800} oneFpsPlay={true} type={state.type} url=\"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\" isLive={false} /\u003e, document.getElementById('root'));\n```\n\n# `Props`\n\n### `Player`通用\n\n```ts\nexport interface ISinglePlayerProps {\n  /**\n   * 视频播放地址\n   */\n  url?: string;\n\n  /**\n   * 容器类名\n   */\n  className?: string;\n  children?: React.ReactNode;\n\n  /**\n   * 同html video muted  静音\n   * @default true\n   */\n  muted?: boolean;\n  /**\n   * 同html video autoplay  自动播放\n   * @default true\n   */\n  autoPlay?: boolean;\n\n  /**\n   * 同html video playsinline  自动播放\n   * @default false\n   */\n  playsInline?: boolean;\n  /**\n   *同html video preload  预加载\n   */\n  preload?: string;\n  /**\n   * 视频封面\n   */\n  poster?: string;\n\n  /**\n   * 同html video loop  循环\n   * @default false\n   */\n  loop?: boolean;\n\n  /**\n   * 视频格式\n   * @default 'native'\n   */\n  type?: 'flv' | 'hls' | 'native';\n\n  /**\n   * 隐藏工具栏\n   * @default false\n   */\n  hideContrallerBar?: boolean;\n\n  /**\n   * 直播模式\n   * @default true\n   */\n  isLive?: boolean;\n\n  /**\n   * 工具栏右外侧拓展\n   */\n  rightExtContents?: React.ReactNode;\n  /**\n   * 工具栏右内侧拓展\n   */\n  rightMidExtContents?: React.ReactNode;\n  /**\n   * 工具栏左外侧拓展\n   */\n  leftExtContents?: React.ReactNode;\n  /**\n   * 工具栏左内侧拓展\n   */\n  leftMidExtContents?: React.ReactNode;\n\n  /**\n   * 自定义时间轴\n   */\n  customTimeLine?: React.ReactNode;\n\n  /**\n   * 错误重试次数\n   * @default 5\n   */\n  errorReloadTimer?: number;\n\n  /**\n   * 自定义flv参数配置\n   * @type FlvPlayerConfig\n   */\n  flvConfig?: FlvPlayerConfig;\n\n  /**\n   * 自定义hls参数配置\n   * @type HlsConfig\n   */\n  hlsConfig?: HlsConfig;\n\n  /**\n   * 自定义reload函数\n   */\n  reload?: () =\u003e void;\n\n  /**\n   * extaction\n   */\n  extActions?: { [key: string]: (...args: any) =\u003e void };\n\n  /**\n   * 视频可播放时执行钩子\n   */\n  onCanPlayerInit?: () =\u003e void;\n\n  /**\n   * 自定义video事件\n   */\n  videoEvents?: CustomEvent[];\n\n  /**\n   * 自定义播放器的事件\n   */\n  playerEvents?: CustomEvent[];\n\n  /**\n   * 开启单帧播放\n   */\n  oneFpsPlay?: boolean;\n\n  /**\n   * 获取视频针的频次 (ms)\n   */\n  fpsDelay?: number;\n\n  /**\n   * 视频每秒多少帧，用于控制逐帧播放\n   */\n  fps?: number;\n}\n```\n\n### `HistoryPlayer` 独有\n\n```ts\nexport interface ISegmentPlayerProps extends Omit\u003cISinglePlayerProps, 'url'\u003e {\n  /**\n   * 云录像片段信息\n   */\n  segments?: ISegmentType[];\n\n  /**\n   * 云录像开始时间\n   */\n  begin?: number;\n\n  forwordRef?: React.MutableRefObject\u003cExportPlayerType\u003e;\n\n  defaultIndex?: number;\n}\n```\n\n# ISegmentType\n\n```ts\nexport interface ISegmentType {\n  id?: string;\n  /**\n   * 视频片段地址\n   */\n  url?: string;\n\n  /**\n   * 片段开始时间\n   */\n  beginTime: number;\n\n  /**\n   * 片段结束时间\n   */\n  endTime: number;\n}\n```\n\n# `event`\n\n## 支持事件\n\n```javascript\nexport default {\n  RELOAD: 'reload', //手动视频重载\n  RELOAD_FAIL: 'reloadFail', // 视频出错，重连失败\n  RELOAD_SUCCESS: 'reloadSuccess', //视频出错，重连成功\n  ERROR: 'error', //视频出错\n  ERROR_RELOAD: 'errorRload', //视频出错，自动重连\n  HISTORY_PLAY_END: 'historyPlayEnd', //历史视频列表播放结束\n  PLAY_ENDED: 'play_ended', //单个片断播放完毕\n  SEEK: 'seek', //跳跃播放时间\n  TRANSFORM: 'transform', //视频容器缩放\n  CHANGE_PLAY_INDEX: 'changePlayIndex', //历史视频列表播放索引改变\n  HIDE_CONTRALLER: 'hideContraller',\n  SHOW_CONTRALLER: 'showContraller',\n  CLEAR_ERROR_TIMER: 'clearErrorTimer',\n  CANVAS_PAUSE: 'canvasPause', // 逐帧暂停\n  CANVAS_PLAY: 'canvasPlay', //逐帧播放\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasy-martin%2Flm-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feasy-martin%2Flm-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasy-martin%2Flm-player/lists"}