ion-video-player

ion-video-player

📝 Table of Contents

• Prerequisites
• Install
• Setup
• Usage
• Author
• Contributing
• Show your support
• License

✅ Prerequisites

The current version of the library is compatible with Ionic 6+.

⬇️ Install

Using npm

npm install ion-video-player --save

Using yarn

yarn add ion-video-player

🛠 Setup

Once installed you need to import our module in the parent module for the component you will be using it in:

import { IonVideoPlayerModule } from 'ion-video-player';

@NgModule({
  ...
  imports: [IonVideoPlayerModule, ...],
  ...
})
export class YourModule {
}

Usage

Include the component on page template, like the example below:

  <ion-video-player [options]="{
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    type: 'video/mp4',
    poster:'https://via.placeholder.com/500x400',
    controls: true,
    autoplay: false,
    muted: false
  }"
  (play)="yourEvent()"
  (pause)="yourEvent()"
  (ended)="yourEvent()"
  (volumechange)="yourEvent()"
  (playing)="yourEvent()"
  (error)="yourEvent()"
  (error)="yourEvent()"
  ></ion-video-player>

API

Properties

• options
• src: string any valid video link/path
• type: string video mimetype. e.g: 'video/mp4'
• poster: string any valid poster image link/path
• controls: boolean show constrols on video element
• autoplay: boolean auto play video
• muted: boolean to mute video

CSS

Apply css to video element.

  ::ng-deep .ion-video-player{
    width: 100%!important;
    height: 400px!important;  
  }

Author

👤 Najam Us Saqib

• Github: @saqib92

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2022 Saqb92.
This project is MIT licensed.