https://github.com/interactive-video-labs/interactive-video-vue-wrapper
🧩 Thin Vue wrapper for the @interactive-video-labs/core library. Bring cue-based interactive video capabilities to your Vue apps with minimal setup. Declarative, type-safe, and Vue-friendly — supports props, events, and composition API.
https://github.com/interactive-video-labs/interactive-video-vue-wrapper
composition-api cue-points education-tech interactive-video npm-package typescript video-interaction video-player vue vue-wrapper vue3 vuejs
Last synced: 6 months ago
JSON representation
🧩 Thin Vue wrapper for the @interactive-video-labs/core library. Bring cue-based interactive video capabilities to your Vue apps with minimal setup. Declarative, type-safe, and Vue-friendly — supports props, events, and composition API.
- Host: GitHub
- URL: https://github.com/interactive-video-labs/interactive-video-vue-wrapper
- Owner: interactive-video-labs
- License: mit
- Created: 2025-07-31T16:11:17.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-31T19:35:57.000Z (12 months ago)
- Last Synced: 2025-07-31T22:40:51.729Z (11 months ago)
- Topics: composition-api, cue-points, education-tech, interactive-video, npm-package, typescript, video-interaction, video-player, vue, vue-wrapper, vue3, vuejs
- Language: TypeScript
- Homepage:
- Size: 29.3 KB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @interactive-video-labs/vue
Welcome to `@interactive-video-labs/vue` — a lightweight Vue 3 wrapper around the `@interactive-video-labs/core` engine for cue-driven interactive video experiences.
This wrapper enables seamless integration of interactive video players into Vue applications using idiomatic Vue components and bindings, while staying close to the underlying core engine API.
---
## Features
- **Declarative Props**: Control the player via reactive Vue props.
- **Event Handling**: Listen to player events using a simple `onAnalyticsEvent` callback.
- **Dynamic Content**: Update cue points and translations on the fly.
- **Direct Player Access**: Get direct access to the underlying `@interactive-video-labs/core` player instance.
- **TypeScript Support**: Fully typed for a better development experience.
## Installation
Install the package and its peer dependencies using your favorite package manager:
```bash
# With pnpm
pnpm add @interactive-video-labs/vue @interactive-video-labs/core vue
# With npm
npm install @interactive-video-labs/vue @interactive-video-labs/core vue
# With yarn
yarn add @interactive-video-labs/vue @interactive-video-labs/core vue
```
## Basic Usage
Here's a simple example of how to use the `InteractiveVideo` component in your Vue 3 application.
```vue
import { ref } from 'vue';
import InteractiveVideo from '@interactive-video-labs/vue';
import '@interactive-video-labs/core/dist/style.css'; // Don't forget to import the styles
const videoUrl = ref('https://example.com/my-video.mp4');
const cues = ref([
{
time: 10,
payload: { type: 'text', content: 'This is a timed message!' },
},
{
time: 25,
payload: { type: 'quiz', question: 'What is Vue?' },
},
]);
function handleAnalyticsEvent(event, payload) {
console.log('Analytics Event:', event, payload);
}
```
## API Reference
### Props
The component accepts the following props:
| Prop | Type | Required | Default | Description |
| ------------------ | ------------------------------------------------------------- | -------- | ------- | -------------------------------------------------------------------------- |
| `videoUrl` | `string` | `true` | - | The URL of the video to be loaded. |
| `cues` | `CuePoint[]` | `false` | `[]` | An array of cue points for interactive events. Can be updated dynamically. |
| `translations` | `Translations` | `false` | `{}` | An object containing translations for the player UI. |
| `onAnalyticsEvent` | `(event: AnalyticsEvent, payload?: AnalyticsPayload) => void` | `false` | - | Callback function for analytics events emitted by the player. |
| `autoplay` | `boolean` | `false` | `false` | Whether the video should start playing automatically. |
| `loop` | `boolean` | `false` | `false` | Whether the video should loop. |
| `locale` | `string` | `false` | `'en'` | The locale to be used for the player (e.g., 'en', 'es'). |
Any additional attributes passed to the component will be forwarded to the underlying `@interactive-video-labs/core` player configuration.
### Events
Player events are emitted through the `onAnalyticsEvent` prop.
**Available Events:**
- `PLAYER_LOADED`
- `VIDEO_STARTED`
- `VIDEO_PAUSED`
- `VIDEO_ENDED`
- `CUE_TRIGGERED`
- `INTERACTION_COMPLETED`
- `ERROR`
**Example:**
```js
function handleAnalyticsEvent(event, payload) {
switch (event) {
case 'CUE_TRIGGERED':
console.log('A cue was triggered at:', payload.cue.time);
break;
case 'ERROR':
console.error('Player error:', payload.error);
break;
}
}
```
### Exposing the Player Instance
If you need to call methods on the player instance directly, you can get a reference to it using a `ref` on the component.
```vue
import { ref, onMounted } from 'vue';
import InteractiveVideo from '@interactive-video-labs/vue';
import '@interactive-video-labs/core/dist/style.css';
const videoPlayer = ref(null);
onMounted(() => {
// The player instance is available on videoPlayer.value.playerRef
if (videoPlayer.value) {
const corePlayer = videoPlayer.value.playerRef;
corePlayer.play();
}
});
```
---
## 🧑💻 For Developers
For detailed development setup, project structure, testing, build, and publishing instructions, please refer to our [Developer Guide](DEVELOPER.md).
---
## Contributing
Contributions are welcome! Please read our [Contributing Guidelines](CONTRIBUTING.md) to get started.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.