Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mintplayer/mintplayer-ng-video-player
Video player component for angular
https://github.com/mintplayer/mintplayer-ng-video-player
angular dailymotion soundcloud video-player vimeo youtube
Last synced: 3 months ago
JSON representation
Video player component for angular
- Host: GitHub
- URL: https://github.com/mintplayer/mintplayer-ng-video-player
- Owner: MintPlayer
- Created: 2021-06-28T11:16:04.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-05-09T19:16:59.000Z (8 months ago)
- Last Synced: 2024-05-13T15:15:13.143Z (8 months ago)
- Topics: angular, dailymotion, soundcloud, video-player, vimeo, youtube
- Language: TypeScript
- Homepage: https://video-player.mintplayer.com
- Size: 25.3 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @mintplayer/ng-video-player
## Demo
A working demo application can be found here:
- [Angular demo](https://video-player.mintplayer.com)
- [React demo](https://react.video-player.mintplayer.com)
The code is included in the git repository.
## Version info
| License | Build status | Code coverage |
|--------------|--------------|---------------|
| [](https://opensource.org/licenses/Apache-2.0) | [](https://github.com/MintPlayer/mintplayer-ng-video-player/actions/workflows/publish-master.yml) | [](https://codecov.io/gh/MintPlayer/mintplayer-ng-video-player) |
| Package | Version |
|-------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
| @mintplayer/player-progress | [](https://badge.fury.io/js/%40mintplayer%2Fplayer-progress) |
| @mintplayer/youtube-player | [](https://badge.fury.io/js/%40mintplayer%2Fyoutube-player) |
| @mintplayer/vimeo-player | [](https://badge.fury.io/js/%40mintplayer%2Fvimeo-player) |
| @mintplayer/soundcloud-player | [](https://badge.fury.io/js/%40mintplayer%2Fsoundcloud-player) |
| @mintplayer/spotify-player | [](https://badge.fury.io/js/%40mintplayer%2Fspotify-player) |
| @mintplayer/twitch-player | [](https://badge.fury.io/js/%40mintplayer%2Fng-twitch-player) |
| @mintplayer/facebook-player | [](https://badge.fury.io/js/%40mintplayer%2Ffacebook-player) |
| @mintplayer/mixcloud-player | [](https://badge.fury.io/js/%40mintplayer%2Fmixcloud-player) |
| @mintplayer/streamable-player | [](https://badge.fury.io/js/%40mintplayer%2Fstreamable-player) |
| @mintplayer/vidyard-player | [](https://badge.fury.io/js/%40mintplayer%2Fvidyard-player) |
| @mintplayer/wistia-player | [](https://badge.fury.io/js/%40mintplayer%2Fwistia-player) |
| @mintplayer/file-player | [](https://badge.fury.io/js/%40mintplayer%2Ffile-player) |
| @mintplayer/playlist-controller | [](https://badge.fury.io/js/%40mintplayer%2Fplaylist-controller) |
| @mintplayer/video-player | [](https://badge.fury.io/js/%40mintplayer%2Fvideo-player) |
| @mintplayer/ng-video-player | [](https://badge.fury.io/js/%40mintplayer%2Fng-video-player) |
## Important note
Since version 16.1, the dependency graph between the project has changed.
The `ng-video-player` package no longer depends on `ng-youtube-player`, `ng-vimeo-player` and `ng-soundcloud-player`. But now it's the other way around. See the installation instructions below for the updated packages.
## Installation
Run the corresponding commands, depending on what players you want to support in your application:
npm i @mintplayer/ng-video-player
npm i @mintplayer/youtube-player
npm i @mintplayer/vimeo-player
npm i @mintplayer/soundcloud-player
npm i @mintplayer/spotify-player
npm i @mintplayer/twitch-player
npm i @mintplayer/facebook-player
npm i @mintplayer/mixcloud-player
npm i @mintplayer/streamable-player
npm i @mintplayer/vidyard-player
npm i @mintplayer/wistia-player
npm i @mintplayer/file-player
## Usage
Import the modules for which you want to support a player:
```ts
@NgModule({
...,
imports: [
...,
VideoPlayerComponent,
]
providers: [
provideVideoApis(
youtubePlugin,
vimeoPlugin,
soundCloudPlugin,
mixCloudPlugin,
twitchPlugin,
spotifyPlugin,
streamablePlugin,
facebookPlugin,
filePlugin,
vidyardPlugin,
wistiaPlugin
)
]
})
```
Use the component in the template:
```html
```
```ts
@ViewChild('player1') player1!: VideoPlayerComponent;
playVideo(video: string) {
// This will replay the video when the url is the same.
this.player1.setUrl(video);
return false;
}
```
Or use the `url` input binding:
```html
```
```ts
url: string | null = null;
playVideo(video: string) {
// This will not replay the video when the url is the same.
this.url = video;
return false;
}
```
## Components
All components are showcased in the angular app included in the project. You can simply run
npm start -- --open
to discover them.
## Discover yourself
Make sure you have [NodeJS](https://nodejs.org/en/download/) installed.
Then run following commands
git clone https://github.com/MintPlayer/mintplayer-ng-video-player
npm i
npm start -- --open
## Docker image
You can run the docker image which is published to the GitHub Container Registry
docker run -p 4200:80 ghcr.io/mintplayer/mintplayer-ng-video-player:master
and visit [http://localhost:4200](http://localhost:4200).