Registry / web-framework / vue-video-player

vue-video-player

library6.0.0jsnpmunverified

vue-video-player is a package that provides a Vue component for integrating the Video.js player into applications. Version 6.0.0 is the final release under this specific package name and functions primarily as a re-export of the newly named `@videojs-player/vue` package. The project has undergone a significant architectural change, now offering distinct packages for Vue and React (with `@videojs-player/react`). The current stable version for Vue 3 is `@videojs-player/vue@1.x`. This library exclusively supports Vue 3, with Vue 2 support remaining in the legacy `vue-video-player@4.x` branch. It differentiates itself by offering responsive design, extensive customization options for the control panel, and internal processing designed to abstract framework-specific complexities, aiming for a robust and flexible video integration solution.

web-framework communication

npm install vue-video-player

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-VIDEO-PLAYER

vue-video-player

web-frameworkjavascriptv6.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VideoPlayer

✓ import { VideoPlayer } from '@videojs-player/vue'

✗ import VideoPlayer from '@videojs-player/vue'

The primary component is a named export from the new package. While vue-video-player@6.0.0 re-exports this, direct import from @videojs-player/vue is recommended.

video.js/dist/video-js.css

✓ import 'video.js/dist/video-js.css'

Essential CSS for the Video.js player theme and controls. Must be imported separately.

@videojs-player/vue/dist/index.css

✓ import '@videojs-player/vue/dist/index.css'

Component-specific CSS for the Vue wrapper. This should also be explicitly imported.

This quickstart demonstrates how to import and use the VideoPlayer component from `@videojs-player/vue` in a Vue 3 setup script. It includes necessary CSS imports and sets up basic player options for a responsive video.

<template> <div class="video-container"> <h1>My Custom Video Player</h1> <VideoPlayer :options="playerOptions" /> </div> </template> <script setup lang="ts"> import { reactive } from 'vue'; import { VideoPlayer } from '@videojs-player/vue'; import 'video.js/dist/video-js.css'; // Core Video.js CSS import '@videojs-player/vue/dist/index.css'; // Component-specific CSS // Basic player options (customize as needed) const playerOptions = reactive({ autoplay: true, controls: true, responsive: true, fluid: true, // Scales the player to fill the width of the container sources: [ { src: 'https://cdn.plyr.io/static/demo/earth.mp4', type: 'video/mp4', }, ], // You can add more Video.js options here, e.g., poster, language, etc. // Example: poster: 'your-poster-image.jpg' }); </script> <style scoped> .video-container { max-width: 900px; /* Example: Constrain player width */ margin: 20px auto; background-color: #f0f0f0; padding: 10px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; margin-bottom: 20px; } </style>

Debug

Known issues

breakingThe `vue-video-player` package has been renamed to `@videojs-player/vue`. Version 6.0.0 of `vue-video-player` only re-exports the new package and is considered the final release under the old name. Future development and features will be in `@videojs-player/vue`.

fix

Migrate your project to use `@videojs-player/vue`. Install it via `npm install @videojs-player/vue video.js @types/video.js` and update all import statements accordingly.

affects: >=6.0.0

breakingSupport for Vue 2 has been dropped. The `vue-video-player@6.0.0` and `@videojs-player/vue` packages are exclusively compatible with Vue 3. Using them with Vue 2 will result in errors.

fix

If you need Vue 2 support, you must use `vue-video-player@4.x`. For new projects or upgrades, migrate your application to Vue 3 or target `@videojs-player/vue` only in Vue 3 environments.

affects: >=6.0.0

gotchaThe essential Video.js base CSS and `@videojs-player/vue` component-specific CSS must be manually imported into your application. Without these, the player controls may be missing, or the styling will be incorrect.

fix

Add `import 'video.js/dist/video-js.css';` and `import '@videojs-player/vue/dist/index.css';` to your main entry file (e.g., `main.ts`) or the component where the player is used.

affects: *

gotchaThe core `video.js` library and its TypeScript type definitions (`@types/video.js`) are peer dependencies. They must be explicitly installed alongside `@videojs-player/vue` for the component to function correctly and for TypeScript projects to compile without errors.

fix

Ensure you have installed both: `npm install video.js@7.x @types/video.js@7.x`.

affects: >=6.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'vue-video-player'

The package has been renamed to `@videojs-player/vue`. You are trying to import from the old package name or have not installed the new one.

fix

Install the new package (`npm install @videojs-player/vue`) and update your import statements from `vue-video-player` to `@videojs-player/vue`.

[Vue warn]: Failed to resolve component: VideoPlayer

This typically occurs when using `@videojs-player/vue` (or `vue-video-player@6`) in a Vue 2 application, or if the component is not correctly imported and registered in a Vue 3 setup.

fix

Verify that your application is running Vue 3. Ensure `VideoPlayer` is correctly imported with `import { VideoPlayer } from '@videojs-player/vue';` and included in your component's template.

Video player appears unstyled, controls are missing, or layout is broken.

The required CSS files for Video.js and the wrapper component are not being loaded.

fix

Ensure that `import 'video.js/dist/video-js.css';` and `import '@videojs-player/vue/dist/index.css';` are present in your application's entry point or the component where `VideoPlayer` is used.

Upgrade

Version history

6.0.0latest on npm

Audit

Dependencies

@types/video.jsrequiredTypeScript type definitions for the underlying Video.js library.

video.jsrequiredThe core video player library that this package wraps.

vuerequiredThe Vue framework, required for component functionality. Only Vue 3.x is supported.

Agent activity

49 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/surmon-china/videojs-player ↗

packagehttps://www.npmjs.com/package/vue-video-player ↗

homepagehttps://videojs-player.github.io/ ↗