• About
• Getting Started
  • Prerequisites
  • Installation
  • Usage
• Roadmap
• Contributing
• Support
• License
• Acknowledgements

This library was generated with Angular CLI version 16.2.0.

About

Main features

• Lightweight, no nonsense video player for angular
• Emulate the youtube video progress bar. Can show chapters and a thumbnail for hovered video time.
• Interface intended to stick to the HTML5 video element (as much as possible, suggestions are welcome and check roadmap for features to come)
• Manage the video displayed using [sources] input
• Manage the subtitles using [tracks] input
• Use the [chapters] input to display current media chapter

Getting Started

Prerequisites

This component is only available for Angular projects.

Installation

1. Install the package

npm install @Poseclop/ngx-video-player

or

yarn add @Poseclop/ngx-video-player

2. Import the module in your application

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxVideoPlayerModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Add the component in your application

<ngx-video-player
  controls
  [poster]="/assets/img/myPoster"
  [chapters]="[
    {
      title: 'Chapter 1';
      time: 0
    },
    {
      title: 'Chapter 2';
      time: 10
    }]"
  [tracks]="[{
      src: 'assets/vtt/TOS-en.vtt',
      kind: 'subtitles',
      srclang: 'en',
      label: 'English'
    },
    {
      src: 'assets/vtt/TOS-fr-Goofy.vtt',
      kind: 'subtitles',
      srclang: 'fr',
      label: 'Français'
    }]"
  [sources]="[
    {
      src: 'assets/video/tears-of-steel-battle-clip-medium.mp4',
      type: 'video/mp4',
    },
    {
      src: 'assets/video/tears-of-steel-battle-clip-medium.ogg',
      type: 'video/ogg',
    },
  ]">
</ngx-video-player>

Usage

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | controls | boolean | true | Display the video controls | | posterSrc | string | null | URL of the poster image | | sources | ISourceAttribute[] | null | List of video sources | | tracks | ITrackAttribute[] | null | List of video tracks | | chapters | IChapterAttribute[] | null | List of video chapters | | autoplay | boolean | false | Autoplay the video | | loop | boolean | false | Loop the video | | width | string | '100%' | Width of the video | | height | string | '100%' | Height of the video | | crossOrigin | string | null | Cross origin of the video | | volume | number | 1 | Volume of the video |

Attributes

| Attribute | Type | Description | | --- | --- | --- | | video | HTMLVideoElement | HTML5 video element |

Methods

| Method | Description | | --- | --- | | toogleVideoPlayPause() | Toogle the video play/pause | | stopVideo() | Stop the video | | setVideoTime(seconds: number) | Set the video time | | setVideoVolume(volume: number) | Set the video volume | | selectSubtitles(track: ITrackAttributes) | Select the subtitles track | | toggleFullScreen() | Toogle the video fullscreen | | advanceVideoBy(seconds: number) | Advance the video by the given seconds |

Interfaces

ISourceAttribute

| Attribute | Type | Description | | --- | --- | --- | | src | string | URL of the video source | | type | string | Type of the video source |

ITrackAttribute

| Attribute | Type | Description | | --- | --- | --- | | src | string | URL of the track | | kind | string | Kind of the track | | srclang | string | Language of the track | | label | string | Label of the track |

IChapterAttribute

| Attribute | Type | Description | | --- | --- | --- | | title | string | Title of the chapter | | time | number | Start time of the chapter in seconds |

Roadmap

This component is still in development and some features are still missing. Here is a list of features to come:

• [ ] Add more tests
• [ ] Add more documentation
• [ ] Add more examples
• [ ] Use the base video attributes to make the interface seemless with a html5 tag
• [ ] Optimize performance
• [ ] Add more features:
  • [ ] Add more controls
  • [ ] Add more events
  • [ ] Add more attributes
  • [ ] Add more methods
  • [ ] Add more inputs
  • [ ] Add more outputs
  • [ ] Add skip by X seconds buttons
  • [ ] Handle the autoSwitch to fullScreen (possible?)

Contributing

So yeah all help is welcome. I'm kind of new to the dev community but I'll do my best to ensure new contrivutions are dully treated and hilighted. Best way to test your contrivutions is to run ng serve to launch the default project (demo application) and 'ng build --watch' to build the library on the fly.

Build

Run ng build ngx-video-player to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test ngx-video-player to execute the unit tests via Karma.