Amad Player

Amad Player is a customizable Vue.js component for creating audio and video players. It provides a simple and flexible player with basic controls such as play/pause, volume control, seek functionality, and full-screen mode for videos. This package is perfect for integrating audio and video players into your Vue.js applications.

Demo

Check out the live demo here: Demo Link.

Installation

To install Amad Player via npm:

npm i amad-player

Usage

Once installed, you can use the audio and video player components in your Vue.js app.

Importing the Player Component

import { AmadAudio, AmadVideo } from 'amad-player';

Import the AmadPlayer styles from 'amad-player/style.css'. For example:

@import 'amad-player/style.css';

Using Amad Audio

Add the AmadAudio component in your template

import { AmadAudio } from 'amad-player';

  <AmadAudio
    :file="audioFile"
  />

Using Amad Video

Add the AmadVideo component in your template

import { AmadVideo } from 'amad-player';

  <AmadVideo
    :file="audioFile"
  />

Configuration

Props for Audio Player (AmadAudio)

| Prop | Type | Default | Description | |----------------|---------|---------|------------------------| | file | string | null | audio src (required) | | autoPlay | boolean | false | for autoplay audio | | skip | boolean | true | for skip buttons | | preload | string | metadata| preload | | loop | boolean | false | play audio in loop | | title | string | null | the title of the audio | | bgColor | string | #333 | background color | | textColor | string | #fff | text color | | barColor | string | #d1d5db | bar color | | barSeekerColor | string | null | bar seeker color | | iconStyle | string | #333 | icons color | | spinnerColor | string | #fff | loading spinner | | showLoading | boolean | true | display loading on load|

Props for Video Player (AmadVideo)

| Prop | Type | Default | Description | |----------------|---------|---------|------------------------| | file | string | null | audio src (required) | | poster | string | null | poster or thumbnail | | preload | string | metadata| preload | | autoPlay | boolean | false | for autoplay audio | | loop | boolean | false | play audio in loop | | title | string | null | the title of the audio | | skip | boolean | true | for skip buttons | | iconStyle | string | #333 | icons color |