DEV Community

Luca Argentieri
Luca Argentieri

Posted on

5

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay