A new customizable vue video player

Hey developers!

Today, my team at display.studio released a new Vue library! We are excited to contribute to the open-source community by creating useful tools that are highly customizable and easy to implement.

Library Link

First of all, what is it and why?

There are a lot of video player libraries but we found them hard to customize, heavy, and not easy to use in our nuxt projects.
Our library is available for every vue and nuxt project.
Guide to installation

Our goal

We have developed a wrapper with minimal logic, which provides you with all the props and events of the video tag.

Example:

<script setup>
import { VuePlayer } from '@display-studio/vue-player'
</script>

<template>
    <div>
        <VuePlayer src="" poster="">
           <MyCustomControls />
        </VuePlayer>
    </div>
</template>

By default, the controls of the native video tag are disabled to allow you to utilize your custom controls.

Inside the VuePlayer instance, you can use the useVuePlayer function which provides you with:

• togglePlay
• playing
• toggleMute
• videoMuted

With these elements, you can customize your controls with different text or SVG.

<script setup>
import { useVuePlayer } from '@display-studio/vue-player'
const player = useVuePlayer()
</script>

<template>
  <div class="vue-player__controls">
    <button @click="player.togglePlay()" class="vue-player__controls-toggleplay">
      {{ player.playing ? "pause" : "play" }}
    </button>
    <button @click="player.toggleMute()" class="vue-player__controls-togglemute">
      {{ player.videoMuted ? "unmute" : "mute" }}
    </button>
  </div>
</template>

We started a discussion on GitHub to talk about new features such as implementing a fullscreen function in useVuePlayer to customize and place where you prefer.

Anyone who wants to contribute is welcome!
We are open to listening to feedback on bugs and new feature requests.

Thank you!