{"id":15283,"library":"vue-video-player","title":"Vue Video.js Player","description":"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.","status":"renamed","version":"6.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/surmon-china/videojs-player","tags":["javascript","vue-video-player","vue video player","video player","vue player","vue video","typescript"],"install":[{"cmd":"npm install vue-video-player","lang":"bash","label":"npm"},{"cmd":"yarn add vue-video-player","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-video-player","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"TypeScript type definitions for the underlying Video.js library.","package":"@types/video.js","optional":false},{"reason":"The core video player library that this package wraps.","package":"video.js","optional":false},{"reason":"The Vue framework, required for component functionality. Only Vue 3.x is supported.","package":"vue","optional":false}],"imports":[{"note":"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.","wrong":"import VideoPlayer from '@videojs-player/vue'","symbol":"VideoPlayer","correct":"import { VideoPlayer } from '@videojs-player/vue'"},{"note":"Essential CSS for the Video.js player theme and controls. Must be imported separately.","symbol":"video.js/dist/video-js.css","correct":"import 'video.js/dist/video-js.css'"},{"note":"Component-specific CSS for the Vue wrapper. This should also be explicitly imported.","symbol":"@videojs-player/vue/dist/index.css","correct":"import '@videojs-player/vue/dist/index.css'"}],"quickstart":{"code":"<template>\n  <div class=\"video-container\">\n    <h1>My Custom Video Player</h1>\n    <VideoPlayer :options=\"playerOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { reactive } from 'vue';\nimport { VideoPlayer } from '@videojs-player/vue';\nimport 'video.js/dist/video-js.css'; // Core Video.js CSS\nimport '@videojs-player/vue/dist/index.css'; // Component-specific CSS\n\n// Basic player options (customize as needed)\nconst playerOptions = reactive({\n  autoplay: true,\n  controls: true,\n  responsive: true,\n  fluid: true, // Scales the player to fill the width of the container\n  sources: [\n    {\n      src: 'https://cdn.plyr.io/static/demo/earth.mp4',\n      type: 'video/mp4',\n    },\n  ],\n  // You can add more Video.js options here, e.g., poster, language, etc.\n  // Example: poster: 'your-poster-image.jpg'\n});\n</script>\n\n<style scoped>\n.video-container {\n  max-width: 900px; /* Example: Constrain player width */\n  margin: 20px auto;\n  background-color: #f0f0f0;\n  padding: 10px;\n  border-radius: 8px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\nh1 {\n  text-align: center;\n  color: #333;\n  margin-bottom: 20px;\n}\n</style>","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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`.","severity":"breaking","affected_versions":">=6.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=6.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure you have installed both: `npm install video.js@7.x @types/video.js@7.x`.","message":"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.","severity":"gotcha","affected_versions":">=6.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Install the new package (`npm install @videojs-player/vue`) and update your import statements from `vue-video-player` to `@videojs-player/vue`.","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.","error":"Module not found: Error: Can't resolve 'vue-video-player'"},{"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.","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.","error":"[Vue warn]: Failed to resolve component: VideoPlayer"},{"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.","cause":"The required CSS files for Video.js and the wrapper component are not being loaded.","error":"Video player appears unstyled, controls are missing, or layout is broken."}],"ecosystem":"npm"}