@mintplayer/ng-video-player

Demo

A working demo application can be found here. The code is included in the git repository.

Version info

License	Build status	Code coverage

Package	Version
@mintplayer/player-progress
@mintplayer/youtube-player
@mintplayer/vimeo-player
@mintplayer/soundcloud-player
@mintplayer/spotify-player
@mintplayer/twitch-player
@mintplayer/facebook-player
@mintplayer/mixcloud-player
@mintplayer/streamable-player
@mintplayer/vidyard-player
@mintplayer/wistia-player
@mintplayer/file-player
@mintplayer/playlist-controller
@mintplayer/video-player
@mintplayer/ng-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:

@NgModule({
    ...,
    imports: [
        ...,
        VideoPlayerComponent,
    ]
    providers: [
        provideVideoApis(
            youtubeLoader,
            vimeoLoader,
            soundCloudLoader,
            mixCloudLoader,
            twitchLoader,
            spotifyLoader,
            streamableLoader,
            facebookLoader,
            fileLoader,
            vidyardLoader,
            wistiaLoader
        )
    ]
})

Use the component in the template:

<video-player [width]="width" [height]="height" [autoplay]="true"
    [(volume)]="volume" [(mute)]="isMuted" [(playerState)]="playerState"
    (progressChange)="onProgressChange($event)" (isPipChange)="isPip = $event" #player1></video-player>

@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:

<video-player [width]="width" [height]="height" [autoplay]="true" [url]="url"
    [(volume)]="volume" [(mute)]="isMuted" [(playerState)]="playerState"
    (progressChange)="onProgressChange($event)" (isPipChange)="isPip = $event"></video-player>

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 installed. Then run following commands

git clone https://github.com/MintPlayer/mintplayer-ng-video-player
npm i
npm start -- --open