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"

React video player component for Kinescope

Embed the Kinescope player in a React or Next.js app as a component. Configure it with props, react to player events and control playback through a ref.

Start for free

View on GitHub

Quick start

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

Install the package

npm or yarn.

terminal

npm install @kinescope/react-kinescope-player

Render the player

Pass the video ID from your Kinescope dashboard.

jsx

import KinescopePlayer from '@kinescope/react-kinescope-player';

export default function Player() {
  return <KinescopePlayer videoId="yourVideoId" />;
}

Use it in Next.js

The player runs in the browser, so load it with ssr: false.

jsx

import dynamic from 'next/dynamic';

const KinescopePlayer = dynamic(
  import('@kinescope/react-kinescope-player'),
  { ssr: false }
);

Try the player API

The React 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 React component exposes

Playback props

autoPlay, muted, loop, playsInline, preload, poster, controls and more.

Content props

title, subtitle, chapters, bookmarks, vtt text tracks and callToAction buttons in the player.

Protection and analytics

watermark, drmAuthToken for your authorization backend and externalId to tie views to your users.

Events

onReady, onPlay, onTimeUpdate, onEnded, onQualityChanged, onCallAction and other player events.

Methods

Through a ref: play, pause, seekTo, setVideoQuality, setPlaybackRate, setFullscreen, setPip and more.

Next.js ready

Load the component with next/dynamic and ssr: false, as in the README example.

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.

Yes. Import it with next/dynamic and ssr: false, because the player runs in the browser.

Pass a ref to the component and call methods such as play, pause, seekTo or setVideoQuality on it.

Yes. The component has a watermark prop and a drmAuthToken prop for videos checked by your authorization backend.

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