/mintplayer-ng-video-player

Video player component for angular

Primary LanguageTypeScript

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

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(
            youtubePlugin,
            vimeoPlugin,
            soundCloudPlugin,
            mixCloudPlugin,
            twitchPlugin,
            spotifyPlugin,
            streamablePlugin,
            facebookPlugin,
            filePlugin,
            vidyardPlugin,
            wistiaPlugin
        )
    ]
})

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

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.