{"id":14994722,"url":"https://github.com/atom-platform/ngx-plyr","last_synced_at":"2025-09-25T15:30:47.593Z","repository":{"id":233481543,"uuid":"786884403","full_name":"atom-platform/ngx-plyr","owner":"atom-platform","description":"Angular 17+ binding for Plyr video \u0026 audio player","archived":false,"fork":false,"pushed_at":"2024-07-04T16:52:19.000Z","size":1005,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-01-07T07:09:17.581Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atom-platform.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2024-04-15T13:39:43.000Z","updated_at":"2025-01-07T04:56:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"6569d305-ef46-4784-87b5-c5c63e5fb985","html_url":"https://github.com/atom-platform/ngx-plyr","commit_stats":null,"previous_names":["atom-platform/ngx-plyr"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atom-platform%2Fngx-plyr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atom-platform%2Fngx-plyr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atom-platform%2Fngx-plyr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atom-platform%2Fngx-plyr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atom-platform","download_url":"https://codeload.github.com/atom-platform/ngx-plyr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234207677,"owners_count":18796297,"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":[],"created_at":"2024-09-24T16:08:21.606Z","updated_at":"2025-09-25T15:30:42.255Z","avatar_url":"https://github.com/atom-platform.png","language":"CSS","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# Atom-Platform ngx-plyr for Angular\n\n## Forked from smnbbrv/ngx-plyr, but this version supports angular 17+\n\n## @atom-platform/ngx-plyr\n\nAngular 17+ bindings for [plyr video and audio player](https://github.com/sampotts/plyr). Supports everything that original library supports.\n\n[![Push](https://github.com/atom-platform/ngx-plyr/actions/workflows/publish.yml/badge.svg?branch=main\u0026event=push)](https://github.com/atom-platform/ngx-plyr/actions/workflows/publish.yml)\n\n## Installation\n\n```sh\nnpm i plyr @atom-platform/ngx-plyr\n```\n\n## TypeScript typings\n\nAs long as original plyr does not have yet (sigh) typings, this project has its own at typings/plyr/index.d.ts.\n\nIf you have typings issues please refer to the issue #7 for more info.\n\n## Usage\n\nImport `PlyrModule` into the current module's imports:\n\n```ts\nimport { PlyrModule } from '@atom-platform/ngx-plyr';\n\nimports: [\n  // ...\n  PlyrModule,\n],\n```\n\nFinally use `plyr` in your components as attribute:\n\n```html\n\u003cdiv\n  plyr\n  style=\"width: 640px;\"\n  plyrTitle=\"Video 1\"\n  [plyrPlaysInline]=\"true\"\n  [plyrSources]=\"videoSources\"\n  (plyrInit)=\"player = $event\"\n  (plyrPlay)=\"played($event)\"\n\u003e\u003c/div\u003e\n\n\u003cbutton (click)=\"play()\"\u003ePlay\u003c/button\u003e\n```\n\nor tag (remember that in this case `plyr` tag has `display: inline` which cannot accept width, so you need to care of this):\n\n```html\n\u003cplyr\n  style=\"display: block; width: 640px;\"\n  plyrTitle=\"Video 1\"\n  [plyrPlaysInline]=\"true\"\n  [plyrSources]=\"videoSources\"\n  (plyrInit)=\"player = $event\"\n  (plyrPlay)=\"played($event)\"\n\u003e\u003c/plyr\u003e\n\n\u003cbutton (click)=\"play()\"\u003ePlay\u003c/button\u003e\n```\n\nand the component file would have\n\n```ts\n// get the component instance to have access to plyr instance\n@ViewChild(PlyrComponent)\nplyr: PlyrComponent;\n\n// or get it from plyrInit event\nplayer: Plyr;\n\nvideoSources: Plyr.Source[] = [\n  {\n    src: 'bTqVqk7FSmY',\n    provider: 'youtube',\n  },\n];\n\nplayed(event: Plyr.PlyrEvent) {\n  console.log('played', event);\n}\n\nplay(): void {\n  this.player.play(); // or this.plyr.player.play()\n}\n```\n\nFor using with hls.js and dash.js check the examples and implementation of this project's `src/app` folder.\n\n## API\n\nThe API mostly replicates the original Plyr API. See \u003chttps://github.com/sampotts/plyr\u003e for more info\n\n### Inputs\n\n- **plyrType**: `video` or `audio`, see [source setters](https://github.com/sampotts/plyr#the-source-setter)\n- **plyrTitle**: string, see [source setters](https://github.com/sampotts/plyr#the-source-setter)\n- **plyrPoster**: poster URL, see [source setters](https://github.com/sampotts/plyr#the-source-setter)\n- **plyrSources**: array of sources, see [source setters](https://github.com/sampotts/plyr#the-source-setter)\n- **plyrTracks**: array of tracks, see [source setters](https://github.com/sampotts/plyr#the-source-setter)\n- **plyrOptions**: [initial Plyr options](https://github.com/sampotts/plyr#options)\n- **plyrPlaysInline**: whether underlying element has `playsinline` attribute, boolean\n- **plyrCrossOrigin**: [whether underlying element has `crossorigin` attribute, boolean\n- **plyrDriver**: see [custom plyr driver](#custom-plyr-driver)\n\n\u003e **Important**: changing `plyrOptions`, `plyrPlaysInline` and `plyrCrossOrigin` will trigger the `Plyr` reinitialization, since these options cannot be changed on-the-fly\n\n### Events\n\nngx-plyr events:\n\n- **plyrInit**: emits a plyr instance when it gets created\n\n[plyr events:](https://github.com/sampotts/plyr#events)\n\n- **plyrProgress**: replicates original _progress_ event\n- **plyrPlaying**: replicates original _playing_ event\n- **plyrPlay**: replicates original _play_ event\n- **plyrPause**: replicates original _pause_ event\n- **plyrTimeUpdate**: replicates original _timeupdate_ event\n- **plyrVolumeChange**: replicates original _volumechange_ event\n- **plyrSeeking**: replicates original _seeking_ event\n- **plyrSeeked**: replicates original _seeked_ event\n- **plyrRateChange**: replicates original _ratechange_ event\n- **plyrEnded**: replicates original _ended_ event\n- **plyrEnterFullScreen**: replicates original _enterfullscreen_ event\n- **plyrExitFullScreen**: replicates original _exitfullscreen_ event\n- **plyrCaptionsEnabled**: replicates original _captionsenabled_ event\n- **plyrCaptionsDisabled**: replicates original _captionsdisabled_ event\n- **plyrLanguageChange**: replicates original _languagechange_ event\n- **plyrControlsHidden**: replicates original _controlshidden_ event\n- **plyrControlsShown**: replicates original _controlsshown_ event\n- **plyrReady**: replicates original _ready_ event\n\n- **plyrLoadStart**: replicates original _loadstart_ event\n- **plyrLoadedData**: replicates original _loadeddata_ event\n- **plyrLoadedMetadata**: replicates original _loadedmetadata_ event\n- **plyrQualityChange**: replicates original _qualitychange_ event\n- **plyrCanPlay**: replicates original _canplay_ event\n- **plyrCanPlayThrough**: replicates original _canplaythrough_ event\n- **plyrStalled**: replicates original _stalled_ event\n- **plyrWaiting**: replicates original _waiting_ event\n- **plyrEmptied**: replicates original _emptied_ event\n- **plyrCueChange**: replicates original _cuechange_ event\n- **plyrError**: replicates original _error_ event\n\n- **plyrStateChange**: replicates original _statechange_ event\n\n## Getters and setters / Methods\n\nYou can use standard [getters and setters](https://github.com/sampotts/plyr#getters-and-setters) and [methods](https://github.com/sampotts/plyr#methods) by getting `Plyr` instance from `plyrInit`.\n\n## Custom Plyr driver\n\nThe library allows you to go in its heart by defining a custom Plyr driver. What it means: the hardest stuff is still done for you, but you can apply some actions in the critical points like creating the Plyr instance, updating and destroying it.\n\nThis is the right place for integration with other libraries like hls.js, dash.js etc.\n\nThe default implementation looks like this:\n\n```ts\nimport Plyr from \"plyr\";\nimport {\n  PlyrDriver,\n  PlyrDriverCreateParams,\n  PlyrDriverUpdateSourceParams,\n  PlyrDriverDestroyParams,\n} from \"./plyr-driver\";\n\nexport class DefaultPlyrDriver implements PlyrDriver {\n  create(params: PlyrDriverCreateParams) {\n    return new Plyr(params.videoElement, params.options);\n  }\n\n  updateSource(params: PlyrDriverUpdateSourceParams) {\n    params.plyr.source = params.source;\n  }\n\n  destroy(params: PlyrDriverDestroyParams) {\n    params.plyr.destroy();\n  }\n}\n```\n\nYou can create your own driver and pass it as input parameter to the `plyr` component.\n\n## Integrations\n\nTo integrate the library with hls.js and dash.js see the corresponding [demo source code](https://github.com/atom-platform/ngx-plyr/tree/master/src/app). To integrate others, use same approach with a custom Plyr driver.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatom-platform%2Fngx-plyr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatom-platform%2Fngx-plyr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatom-platform%2Fngx-plyr/lists"}