Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shubham947/angular-player
An HTML5 media player.
https://github.com/shubham947/angular-player
audio hacktoberfest player video
Last synced: about 1 month ago
JSON representation
An HTML5 media player.
- Host: GitHub
- URL: https://github.com/shubham947/angular-player
- Owner: shubham947
- License: mit
- Created: 2022-08-06T07:33:04.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-27T16:35:01.000Z (over 1 year ago)
- Last Synced: 2024-10-12T20:03:22.643Z (2 months ago)
- Topics: audio, hacktoberfest, player, video
- Language: TypeScript
- Homepage:
- Size: 1.63 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Player
An HTML5 media player, built using Angular. It has interface similar to Youtube player.
It can be used in Angular 14 and above.
## Usage
### Add NgPlyrModule to your AppModule:
```
import { NgPlyrModule } from 'ng-plyr';
...
@NgModule({
imports: [
...
NgPlyrModule
],
...
})
export class AppModule { }
```
### Add this tag to your Component html
```
```
**OR**
```
```
**OR**
```
```
And assign value to mediaUrl in component.ts
**Note:** `playlist` is preferred over `src`, so if both are passed, media will play from `playlist`
### ng-plyr input attributes
| Input | Type | Description |
| ------------------- | -------------------- | --------------------------------------------- |
| `src` | `string` | URL of media source |
| `preload` | `string` | Same as HTML `` preload Attribute |
| `loadingImgSrc` | `string` | URL of custom loading image |
| `playFrom` | `number` | Play media starting from specified second |
| `volume` | `number` | Keep playing the same media over and over |
| `loop` | `boolean` | Play media starting from specified second |
| `bookmarks` | `number[]` | Array of seconds within media max duration |
| `autoplay` | `boolean` | Enable/disable autoplay |
| `nextMedia` | `Media` | Media to be played next |
| `playlist` | `Media[]` | Pass entire playlist to play |
| `loopPlaylist` | `boolean` | Loop over playlist |
| `poster` | `string` | URL of the poster image |
### Output events
| Output | Type | Description |
| ------------------- | -------------------- | --------------------------------------------- |
| `playing` | `boolean` | Media started to play |
| `paused` | `boolean` | Media paused |
| `ended` | `boolean` | Media ended |
| `onnext` | `Media` | Playing next media |
| `onprev` | `Media` | Playing previous media |
| `fullscreen` | `boolean` | Media entered/exited fullscreen |
| `volumechange` | `{ level:number, muted:boolean }` | Volume changed or muted/unmuted |
### Upcoming Inputs and Output events
| Input | Type | Description |
| ------------------- | --------------------------------- | -------------------------------------------- |
| `type` | `MediaType` | Specify media type |
| `captions` | `[{ path: string, lang: string }]`| Add captions to media |
| Output | Type | Description |
| ------------------- | -------------------- | --------------------------------------------- |
| `error` | `object` | Details of any error if occured |
### Methods
| Method(arg:type) | Description |
| ----------------------------------------------- | --------------------------------------------- |
| `play()` | Play current media |
| `pause()` | Pause current media |
| `next()` | Play next media |
| `prev()` | Play prev media |
| `enableMediaLooping(loop?:boolean)` | Turn on loop for media (default true) |
| `enablePlaylistLooping(loop?:boolean)` | Turn on loop for playlist (default true) |
| `changeVolume(level:number)` | Set volume to level (0 to 1) |
| `seekTo(atSecond:number)` | Seek media to specific second |
| `setPlaybackSpeed(rate:number)` | Set media playback rate (range, .25 to 2) |
| `getCurrentlyPlaying()` | Get currently playing Media |
| `getNextMedia()` | Get nextMedia |
| `getNumOfMediaInPlaylist()` | Get number of media items in playlist |
| `addToPlaylist(mediaItems:Media[], atStart?:boolean)` | Add mediaItems to playlist at end/start |
| `playNext(media:Media[])` | Add media to playlist after current media |
## Features
- [x] Shortcuts available for different buttons
- [x] Can switch to PIP and Fullscreen
- [x] Double tap to seek back/forward
- [x] Shows buffer status on timeline
- [x] Autofetch Video metadata
- [x] Change playback speed
- [x] Seek to specific time by clicking on timeline
- [x] Control for media volume
- [x] Show loading animation on buffering
- [x] Play Next/Prev media
- [x] Button for looping
- [x] Show media title
- [x] Cast to other devices
- [x] While casting local player acts as remote
- [ ] Playing audio
- [ ] Switch for autoplay
### For Developers
- [x] Provide media src
- [x] Custom loading image can be set
- [x] Bookmarks can be shown on timeline
- [x] Looping the same media
- [x] Provide more controls like volume, playfrom, loop etc.
- [x] Emit events from ng-plyr: ended, playing, paused, volumechange, fullscreen etc.
- [x] Playlist support
- [x] Access to Player methods: play, pause, next, prev etc.
- [x] Cast service methods are accessible
- [x] Player theme can be customised
- [x] Hide controls
- [ ] Multiple media sources
- [ ] Hover to play media thumnails
- [ ] Show bookmark text on hovering a bookmark
- [ ] Show image previews on hovering timeline
## Shortcuts
| Key | Function |
| ------------ | -------------------- |
| Space bar | Play/Pause |
| `m` | Mute/Unmute |
| `i` | Toggle miniplayer |
| `f` | Toggle fullscreen |
| `k` | Play/Pause |
| `0` or `home`| Go to start |
| `1 to 9` | Go to 10% to 90% |
| `end` | Go to end |
| Up arrow | Volume up |
| Down arrow | Volume down |
| Left arrow | Seek back 5 sec |
| Right arrow | Seek ahead 5 sec |
| `<` | Decrease playback speed by .25x |
| `>` | Increase playback speed by .25x |
| `Shift + N` | Play next media |
| `Shift + P` | Play prev media |
## Cast setup
Add below script in `index.html`
```
```
Now you an use CastService methods in your components.
## Known issues
- Volume slider UI