curl -X POST https://uploader.kinescope.io/v2/video \ -H "Authorization: Bearer $KINESCOPE_API_TOKEN" \ -H "X-Parent-ID: $PARENT_ID" \ -H "X-Video-Title: Lesson 1" \ -H "X-Video-URL: https://example.com/lesson-1.mp4"

Vue video player component for Vue 3

Add the Kinescope player to a Vue 3 app as a component. Register it for the whole app or import it into one component, then use player events and methods.

Start for free

View on GitHub

Quick start

Install @kinescope/vue-kinescope-player and play your first video. Commands and code are from the package README.

Install the package

Version 2.0.0 and later works with Vue 3.
terminal
```
npm install @kinescope/vue-kinescope-player
```

Register the component

Install it for the whole app, or import KinescopePlayer into a single component.

import KinescopePlayer from '@kinescope/vue-kinescope-player';
import { createApp } from 'vue';

const app = createApp(App);
app.use(KinescopePlayer);
app.mount('#app');

Render the player

Pass the video ID and listen to events.

vue

<template>
  <kinescope-player
    :video-id="yourVideoId"
    @ready="handleReady"
    @play="handlePlay"
  ></kinescope-player>
</template>

Try the player API

The Vue component controls the Kinescope web player. Call its methods on a live player below.

currentTime: 0
paused: true
playbackRate: 1
quality: —
volume: 1
muted: false

Playback

Speed

Quality

Sound

Subtitles

Watermark

player.js

import { load } from '@kinescope/player-iframe-api-loader';

const factory = await load();
const player = await factory.create('player', {
  url: 'https://kinescope.io/56Jg27MqvvttAwHcrCzEA4',
  size: { width: '100%', height: '100%' },
});

player.on(player.Events.TimeUpdate, ({ data }) => {
  console.log(data.currentTime, data.percent);
});
// Click a button on the left to run a call

Events Loads as you scroll here

Events appear here once the player loads.

Every method and event is in the IFrame Player API docs.

What the Vue component gives you

Vue 3 support

From version 2.0.0 the package targets Vue 3.

Global or local

Player events

Listen to @ready, @play and other player events in the template.

Player methods

Get the component through a ref and call player methods such as play.

Wraps the embed player

The component is a Vue wrapper around the Kinescope embed player, with props grouped into general, behavior and UI options.

Open source

Apache 2.0 license, with the source on GitHub.

The platform behind the SDK

Upload and transcoding

Upload through the dashboard, the API or resumable TUS upload. Every video is encoded into adaptive renditions up to 4K. Video hosting

Own CDN

Kinescope delivers the streams your app plays from its own CDN, with points of presence in Latin America, the United States, Europe and the CIS. Video CDN

DRM on the Super plan

Widevine and FairPlay licenses are included on the Super plan. Your backend can approve each play. DRM video hosting

Live streams

Send RTMP or sRTMP from OBS, vMix or a hardware encoder and keep an automatic recording. The SDK players show the stream live. Live streaming

Analytics

Views, watch depth and drop-off points for every video. Pass your user ID from the app to see data per viewer. Video analytics

Pay as you go

Start on the free plan with 100 minutes of video and 200 GB of traffic a month. Paid usage: storage and delivery from €0.03/GB, processing €0.01/min. Pricing

Documentation

Every guide for this SDK in its repository, on GitHub.

Reference

Guides

FAQ

Can’t find the answer you need? Check out our All developer tools.

Starting from version 2.0.0, the package works with Vue 3.

Add a ref to the component and call methods on it after the ready event.

Apache 2.0. The component is free; you pay only for Kinescope hosting and delivery.