Crafting a Video Player for React and Vue: A Journey

In my quest to develop a versatile video player for a side project, I encountered numerous challenges. The player needed to support HLS streaming, seamlessly integrate with design systems, and function flawlessly in both Next.js and Nuxt 3 environments. Here's a breakdown of the steps and decisions that guided the creation of my video player for both React and Vue.

Addressing CSS Challenges

Many existing video players caused issues with CSS bleed, disrupting carefully crafted design systems. To counter this, I developed a CSS approach that scoped styles to a single class, reducing the stylesheet from 17 KB to 2.8 KB. This strategy allowed consumers to easily override styles with predictable specificity, maintaining the integrity of their design systems.

Ensuring Next.js Compatibility

The React package needed to work seamlessly with Next.js App Router. To achieve this, I ensured that the "use client" directive was preserved during the build process. This required implementing a custom rollup output plugin to prevent the loss of this critical directive, ensuring smooth integration without a client-component wrapper.

Creating a Nuxt Module

For the Vue package, replicating the React player's ease of use meant developing a dedicated Nuxt module. By isolating Nuxt-specific code into a subpath export, I avoided unnecessary dependencies in non-Nuxt environments. This approach provided a streamlined integration process for Nuxt users, allowing global component registration with minimal effort.

Overcoming a Vue HLS Bug

A bug in the Vue implementation involved the immediate execution of a watcher during setup, leading to a race condition. The solution was to use onMounted for the initial HLS player initialization, ensuring the video element reference was bound before the player setup.

The Testing Playground

To validate the video player's functionality, I developed a live playground using a minimal Next.js app. This allowed users to test the player with various video sources and ensured real-world performance aligned with expectations.

Current and Future Features

The video player, available in both React and Vue versions, supports a range of features including HLS via hls.js, hover-play, and captions passthrough. Future updates may introduce enhancements like Picture-in-Picture toggle and playback speed control.

Try It Out

You can install the player via npm for both React and Vue applications:

# React
npm install @glitchlab/react-video-player hls.js

# Vue
npm install @glitchlab/vue-video-player hls.js

For a live demonstration, visit the playground at video-player-playgraound.vercel.app.

Both packages are open-source and welcome contributions. If you find this tool beneficial, consider starring the GitHub repository or sharing the project with others facing similar challenges.