{"id":14979864,"url":"https://github.com/shubham947/angular-player","last_synced_at":"2026-03-05T20:44:37.431Z","repository":{"id":54448530,"uuid":"521878848","full_name":"shubham947/Angular-Player","owner":"shubham947","description":"An HTML5 media player.","archived":false,"fork":false,"pushed_at":"2023-08-27T16:35:01.000Z","size":1711,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T14:18:28.038Z","etag":null,"topics":["audio","hacktoberfest","player","video"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/shubham947.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-06T07:33:04.000Z","updated_at":"2023-08-10T12:37:41.000Z","dependencies_parsed_at":"2024-09-19T03:02:27.420Z","dependency_job_id":"7622f107-47f5-45b0-84b7-e06673a4c7c4","html_url":"https://github.com/shubham947/Angular-Player","commit_stats":{"total_commits":52,"total_committers":2,"mean_commits":26.0,"dds":0.2692307692307693,"last_synced_commit":"2b70dfa19fbe5864fb7bafc716f639aeb0a7c561"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubham947%2FAngular-Player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubham947%2FAngular-Player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubham947%2FAngular-Player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubham947%2FAngular-Player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shubham947","download_url":"https://codeload.github.com/shubham947/Angular-Player/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241928831,"owners_count":20043883,"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":["audio","hacktoberfest","player","video"],"created_at":"2024-09-24T14:00:48.472Z","updated_at":"2026-03-05T20:44:37.381Z","avatar_url":"https://github.com/shubham947.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://ng-plyr.web.app\"\u003e\u003cimg src=\"https://github.com/shubham947/Angular-Player/actions/workflows/firebase-hosting-merge.yml/badge.svg\" alt=\"Firebase Deployment\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://shubham947.github.io/Angular-Player\"\u003e\u003cimg src=\"https://github.com/shubham947/Angular-Player/actions/workflows/retype-action.yml/badge.svg\" alt=\"Documentation\"\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://www.npmjs.com/package/ng-plyr\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/ng-plyr.svg?style=flat-square\" alt=\"npm\"\u003e\u003c/a\u003e\n    \u003ca href=\"http://packagequality.com/#?package=ng-plyr\"\u003e\u003cimg src=\"https://npm.packagequality.com/shield/ng-plyr.svg?style=flat-square\" alt=\"Package Quality\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/ng-plyr\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/ng-plyr.svg?style=flat-square\" alt=\"npm\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/ng-plyr\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/ng-plyr?style=flat-square\" alt=\"npm\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/shubham947/ng-plyr/blob/master/LICENSE.md\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\" alt=\"MIT licensed\"\u003e\u003c/a\u003e\n    \u003cbr /\u003e\u003cbr /\u003e\n\u003c/p\u003e\n\n# Angular Player\n\nAn HTML5 media player, built using Angular. It has interface similar to Youtube player.\nIt can be used in Angular 14 and above.\n\n## Usage\n### Add NgPlyrModule to your AppModule:\n```\nimport { NgPlyrModule } from 'ng-plyr';\n...\n\n@NgModule({\n  imports: [\n    ...\n    NgPlyrModule\n  ],\n  ...\n})\nexport class AppModule { }\n```\n\n### Add this tag to your Component html\n```\n\u003cng-plyr src='https://example.com/video.mp4'\u003e\u003c/ng-plyr\u003e\n```\n**OR**\n```\n\u003cng-plyr [src]='mediaUrl'\u003e\u003c/ng-plyr\u003e\n```\n**OR**\n```\n\u003cng-plyr [playlist]='mediaArr'\u003e\u003c/ng-plyr\u003e\n```\nAnd assign value to mediaUrl in component.ts\n\n**Note:** `playlist` is preferred over `src`, so if both are passed, media will play from `playlist`\n\n### ng-plyr input attributes\n| Input               | Type                 | Description                                   |\n| ------------------- | -------------------- | --------------------------------------------- |\n| `src`               | `string`             | URL of media source                           |\n| `preload`           | `string`             | Same as HTML `\u003cvideo\u003e` preload Attribute      |\n| `loadingImgSrc`     | `string`             | URL of custom loading image                   |\n| `playFrom`          | `number`             | Play media starting from specified second     |\n| `volume`            | `number`             | Keep playing the same media over and over     |\n| `loop`              | `boolean`            | Play media starting from specified second     |\n| `bookmarks`         | `number[]`           | Array of seconds within media max duration    |\n| `autoplay`          | `boolean`            | Enable/disable autoplay                       |\n| `nextMedia`         | `Media`              | Media to be played next                       |\n| `playlist`          | `Media[]`            | Pass entire playlist to play                  |\n| `loopPlaylist`      | `boolean`            | Loop over playlist                            |\n| `poster`            | `string`             | URL of the poster image                       |\n\n### Output events\n| Output              | Type                 | Description                                   |\n| ------------------- | -------------------- | --------------------------------------------- |\n| `playing`           | `boolean`            | Media started to play                         |\n| `paused`            | `boolean`            | Media paused                                  |\n| `ended`             | `boolean`            | Media ended                                   |\n| `onnext`            | `Media`              | Playing next media                            |\n| `onprev`            | `Media`              | Playing previous media                        |\n| `fullscreen`        | `boolean`            | Media entered/exited fullscreen               |\n| `volumechange`      | `{ level:number, muted:boolean }` | Volume changed or muted/unmuted  |\n\n\n### Upcoming Inputs and Output events\n| Input               | Type                              | Description                                  |\n| ------------------- | --------------------------------- | -------------------------------------------- |\n| `type`              | `MediaType`                       | Specify media type                           |\n| `captions`          | `[{ path: string, lang: string }]`| Add captions to media                        |\n\n| Output              | Type                 | Description                                   |\n| ------------------- | -------------------- | --------------------------------------------- |\n| `error`             | `object`             | Details of any error if occured               |\n\n### Methods\n| Method(arg:type)                                | Description                                   |\n| ----------------------------------------------- | --------------------------------------------- |\n| `play()`                                        | Play current media                            |\n| `pause()`                                       | Pause current media                           |\n| `next()`                                        | Play next media                               |\n| `prev()`                                        | Play prev media                               |\n| `enableMediaLooping(loop?:boolean)`             | Turn on loop for media (default true)         |\n| `enablePlaylistLooping(loop?:boolean)`          | Turn on loop for playlist (default true)      |\n| `changeVolume(level:number)`                    | Set volume to level (0 to 1)                  |\n| `seekTo(atSecond:number)`                       | Seek media to specific second                 |\n| `setPlaybackSpeed(rate:number)`                 | Set media playback rate (range, .25 to 2)     |\n| `getCurrentlyPlaying()`                         | Get currently playing Media                   |\n| `getNextMedia()`                                | Get nextMedia                                 |\n| `getNumOfMediaInPlaylist()`                     | Get number of media items in playlist         |\n| `addToPlaylist(mediaItems:Media[], atStart?:boolean)` | Add mediaItems to playlist at end/start |\n| `playNext(media:Media[])`                       | Add media to playlist after current media     |\n\n## Features\n- [x] Shortcuts available for different buttons\n- [x] Can switch to PIP and Fullscreen\n- [x] Double tap to seek back/forward\n- [x] Shows buffer status on timeline\n- [x] Autofetch Video metadata\n- [x] Change playback speed\n- [x] Seek to specific time by clicking on timeline\n- [x] Control for media volume\n- [x] Show loading animation on buffering\n- [x] Play Next/Prev media\n- [x] Button for looping\n- [x] Show media title\n- [x] Cast to other devices\n- [x] While casting local player acts as remote\n- [ ] Playing audio\n- [ ] Switch for autoplay\n\n### For Developers\n- [x] Provide media src\n- [x] Custom loading image can be set\n- [x] Bookmarks can be shown on timeline\n- [x] Looping the same media\n- [x] Provide more controls like volume, playfrom, loop etc.\n- [x] Emit events from ng-plyr: ended, playing, paused, volumechange, fullscreen etc.\n- [x] Playlist support\n- [x] Access to Player methods: play, pause, next, prev etc.\n- [x] Cast service methods are accessible\n- [x] Player theme can be customised\n- [x] Hide controls\n- [ ] Multiple media sources\n- [ ] Hover to play media thumnails\n- [ ] Show bookmark text on hovering a bookmark\n- [ ] Show image previews on hovering timeline\n\n## Shortcuts\n| Key          | Function             |\n| ------------ | -------------------- |\n| Space bar    | Play/Pause           |\n| `m`          | Mute/Unmute          |\n| `i`          | Toggle miniplayer    |\n| `f`          | Toggle fullscreen    |\n| `k`          | Play/Pause           |\n| `0` or `home`| Go to start          |\n| `1 to 9`     | Go to 10% to 90%     |\n| `end`        | Go to end            |\n| Up arrow     | Volume up            |\n| Down arrow   | Volume down          |\n| Left arrow   | Seek back 5 sec      |\n| Right arrow  | Seek ahead 5 sec     |\n| `\u003c`          | Decrease playback speed by .25x |\n| `\u003e`          | Increase playback speed by .25x |\n| `Shift + N`  | Play next media      |\n| `Shift + P`  | Play prev media      |\n\n## Cast setup\nAdd below script in `index.html`\n```\n\u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1\"\u003e\u003c/script\u003e\n```\nNow you an use CastService methods in your components.\n\n## Known issues\n- Volume slider UI\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubham947%2Fangular-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshubham947%2Fangular-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubham947%2Fangular-player/lists"}