Vue Video.js Player

6.0.0 · renamed · verified Tue Apr 21

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.

Common errors

```
Module not found: Error: Can't resolve 'vue-video-player'
```
cause 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
```
cause 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.
```
cause 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.

Warnings

breaking The `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.
breaking Support 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.
gotcha The 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.
gotcha The 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`.

Install

npm install vue-video-player npm
yarn add vue-video-player yarn
pnpm add vue-video-player pnpm

Imports

VideoPlayer
wrong:
```
import VideoPlayer from '@videojs-player/vue'
```
correct:
```
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.

Quickstart

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>

view raw JSON →