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