Playerify

Audio/Video player for Vuetify 3

Live Demo

View Documentation & Demo

Requirements

• Vue 3.x
• Vuetify 3.x or 4.x

Quick Start

npm i playerify

// main.ts
import PlayerifyPlugin from 'playerify'
import 'playerify/style.css'
app.use(PlayerifyPlugin)

<!-- App.vue -->
<Playerify :src="src" type="video" />

Features

• Audio & Video playback
• Progress tracking & seeking
• Playback speed control
• Volume control
• Loop mode
• Customizable button colors & rounded styles
• Fullscreen support
• TypeScript support

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | src | string | — | Media URL | | type | 'audio' \| 'video' | 'audio' | Media type | | video-width | string | — | Video player width | | video-height | string | — | Video player height | | play-button-color | string | 'primary' | Play button color | | pause-button-color | string | 'primary' | Pause button color | | volume-button-color | string | — | Volume icon button color | | volume-off-button-color | string | — | Mute icon button color | | playback-rate-button-color | string | — | Speed button color | | settings-button-color | string | — | Settings button color | | fullscreen-button-color | string | — | Fullscreen button color | | progress-slider-color | string | 'primary' | Progress bar color | | volume-slider-color | string | 'secondary' | Volume slider color | | progress-color | string | — | Played progress color | | buffer-color | string | — | Buffered range color | | btn-rounded | string | — | Button border radius | | progress-rounded | string | — | Progress bar border radius | | default-rewind | number | 10 | Rewind seconds | | default-volume | number | 1 | Default volume | | show-file-name | boolean | false | Show file name | | show-duration | boolean | false | Show duration | | permanent-volume-slider | boolean | false | Always show volume slider | | debug | boolean | false | Enable debug logging |

Full Documentation

See the full documentation for installation, examples, and API reference.

Credits

Playerify is built using useMediaControls from VueUse for media state management.

Feedback

Found a bug or have ideas? Create an issue.

TODO

• [x] playlist
• [x] cover image
• [x] "picture in picture" mode
• [x] customizable control buttons
• [ ] replace the default fullscreen UI

License

MIT