{"id":13907998,"url":"https://github.com/devcshort/react-hls","last_synced_at":"2025-07-18T06:32:13.113Z","repository":{"id":35024149,"uuid":"197667676","full_name":"devcshort/react-hls","owner":"devcshort","description":"Simple React component for playing hls/rtmp live streams.","archived":false,"fork":true,"pushed_at":"2023-11-02T10:42:59.000Z","size":2441,"stargazers_count":120,"open_issues_count":28,"forks_count":48,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-18T19:49:12.295Z","etag":null,"topics":["component","hacktoberfest","hls","hls-player","react","react-component","video-player"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-hls-player","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"mingxinstar/react-hls","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devcshort.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-18T23:04:39.000Z","updated_at":"2024-10-17T12:10:07.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/devcshort/react-hls","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/devcshort%2Freact-hls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devcshort%2Freact-hls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devcshort%2Freact-hls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devcshort%2Freact-hls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devcshort","download_url":"https://codeload.github.com/devcshort/react-hls/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226361631,"owners_count":17612932,"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":["component","hacktoberfest","hls","hls-player","react","react-component","video-player"],"created_at":"2024-08-06T23:02:23.395Z","updated_at":"2024-11-25T16:31:17.229Z","avatar_url":"https://github.com/devcshort.png","language":"TypeScript","funding_links":[],"categories":["HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"# React HLS Player\n\n![NPM Downloads](https://img.shields.io/npm/dm/react-hls-player?style=flat-square)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/react-hls-player)\n![npm bundle size](https://img.shields.io/bundlephobia/min/react-hls-player)\n\n## Introduction\n\n`react-hls-player` is a simple HLS live stream player.\nIt uses [hls.js](https://github.com/video-dev/hls.js) to play your hls live stream if your browser supports `html 5 video` and `MediaSource Extension`.\n\n## Examples\n\n### Using the ReactHlsPlayer component\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactHlsPlayer from 'react-hls-player';\n\nReactDOM.render(\n  \u003cReactHlsPlayer\n    src=\"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8\"\n    autoPlay={false}\n    controls={true}\n    width=\"100%\"\n    height=\"auto\"\n  /\u003e,\n  document.getElementById('app')\n);\n```\n\n### Using hlsConfig (advanced use case)\n\nAll available config properties can be found on the [Fine Tuning](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning) section of the Hls.js API.md\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactHlsPlayer from 'react-hls-player';\n\nReactDOM.render(\n  \u003cReactHlsPlayer\n    src=\"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8\"\n    hlsConfig={{\n      maxLoadingDelay: 4,\n      minAutoBitrate: 0,\n      lowLatencyMode: true,\n    }}\n  /\u003e,\n  document.getElementById('app')\n);\n```\n\n### Using playerRef\n\nThe `playerRef` returns a ref to the underlying video component, and as such will give you access to all video component properties and methods.\n\n```javascript\nimport React from 'react';\nimport ReactHlsPlayer from 'react-hls-player';\n\nfunction MyCustomComponent() {\n  const playerRef = React.useRef();\n\n  function playVideo() {\n    playerRef.current.play();\n  }\n\n  function pauseVideo() {\n    playerRef.current.pause();\n  }\n\n  function toggleControls() {\n    playerRef.current.controls = !playerRef.current.controls;\n  }\n\n  return (\n    \u003cReactHlsPlayer\n      playerRef={playerRef}\n      src=\"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8\"\n    /\u003e\n  );\n}\n\nReactDOM.render(\u003cMyCustomComponent /\u003e, document.getElementById('app'));\n```\n\nYou can also listen to events of the video\n\n```javascript\nimport React from 'react';\nimport ReactHlsPlayer from 'react-hls-player';\n\nfunction MyCustomComponent() {\n  const playerRef = React.useRef();\n\n  React.useEffect(() =\u003e {\n    function fireOnVideoStart() {\n      // Do some stuff when the video starts/resumes playing\n    }\n\n    playerRef.current.addEventListener('play', fireOnVideoStart);\n\n    return playerRef.current.removeEventListener('play', fireOnVideoStart);\n  }, []);\n\n  React.useEffect(() =\u003e {\n    function fireOnVideoEnd() {\n      // Do some stuff when the video ends\n    }\n\n    playerRef.current.addEventListener('ended', fireOnVideoEnd);\n\n    return playerRef.current.removeEventListener('ended', fireOnVideoEnd);\n  }, []);\n\n  return (\n    \u003cReactHlsPlayer\n      playerRef={playerRef}\n      src=\"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8\"\n    /\u003e\n  );\n}\n\nReactDOM.render(\u003cMyCustomComponent /\u003e, document.getElementById('app'));\n```\n\n## Props\n\nAll [video properties](https://www.w3schools.com/tags/att_video_poster.asp) are supported and passed down to the underlying video component\n\n| Prop                     | Description                                                                                                             |\n| ------------------------ | ----------------------------------------------------------------------------------------------------------------------- |\n| src `String`, `required` | The hls url that you want to play                                                                                       |\n| autoPlay `Boolean`       | Autoplay when component is ready. Defaults to `false`                                                                   |\n| controls `Boolean`       | Whether or not to show the playback controls. Defaults to `false`                                                       |\n| width `Number`           | Video width. Defaults to `100%`                                                                                         |\n| height `Number`          | Video height. Defaults to `auto`                                                                                        |\n| hlsConfig `Object`       | `hls.js` config, you can see all config [here](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning) |\n| playerRef `React Ref`    | Pass in your own ref to interact with the video player directly. This will override the default ref.                    |\n\n### Additional Notes\n\nBy default, the HLS config will have `enableWorker` set to `false`. There have been issues with the HLS.js library that breaks some React apps, so I've disabled it to prevent people from running in to this issue. If you want to enable it and see if it works with your React app, you can simply pass in `enableWorker: true` to the `hlsConfig` prop object. [See this issue for more information](https://github.com/video-dev/hls.js/issues/2064)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.marcochavez.info/\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/43889446?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMarco Chavez\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/devcshort/react-hls/commits?author=mxrcochxvez\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.chrisrshort.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/13677134?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eChris Short\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/devcshort/react-hls/commits?author=devcshort\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#projectManagement-devcshort\" title=\"Project Management\"\u003e📆\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevcshort%2Freact-hls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevcshort%2Freact-hls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevcshort%2Freact-hls/lists"}