@kpoint/angular-sdks

Angular SDK for integrating Kpoint video players into Angular applications.

Overview

@kpoint/angular-sdks provides Angular components for embedding and controlling Kpoint video players in angular projects.
It offers:

• Inline video playback with KpointPlayer
• Full control over video (play, pause, mute, seek, replay)
• Event callbacks for state, load, time updates, and errors
• Type-safe Angular inputs and outputs

Installation

Install the library via npm:

npm install @kpoint/angular-sdks

KPoint Player Integration (Angular)

This guide demonstrates how to integrate the KPoint Video Player in an Angular application using the @kpoint/angular-sdks package.

Import the library module in your Angular app

import { AngularSdks } from 'kpoint-angular-sdks';

imports: [BrowserModule, AppComponent, AngularSdks]

Import the Component

import { KpointPlayer } from '@kpoint/angular-sdks';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, KpointPlayer],
  templateUrl: `
    <kpoint-player
        #player
        [videoId]="videoId"
        [videoHost]="videoHost"
        [onStateChange]="handleStateChange"
      >
      </kpoint-player>

      <div style="margin-top: 20px; display:flex; flex-wrap:wrap; gap:10px;">
      <button (click)="playVideo()">Play</button>
      <button (click)="pauseVideo()">Pause</button>
      </div>

  `

})
export class AppComponent {
  @ViewChild('player', { static: false }) player!: KpointPlayer;

  videoId = "gcc-900ea128-12ec-403f-9fff";
  videoHost = "ktpl.kpoint.com";

  handleStateChange = (args: any) => {
    console.log('Player state changed:', args);
  };

  playVideo() {
    this.player.playVideo();
  }

  pauseVideo() {
    this.player.pauseVideo();
  }

}

Kpoint VX Player (Reels Player)

Import and play Reels directly in your Angular application.

Importing Component and Usage

import { KpointVxPlayer } from '@kpoint/angular-sdks';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, KpointVxPlayer],
  template: `

    <kpoint-vx-player
      #player
      [videoIds]="videoId"
      [videoHost]="videoHost"
      [vxType]="vxType"
      [autoScroll]="autoScroll"
      [loop]="loop"
    >
      </kpoint-vx-player>
  `
})
export class AppComponent {

  @ViewChild('player', { static: false }) player!: KpointVxPlayer;

   videoId = [
        "gcc-a80e1d84-bc6a-4bc6-aadf-7e483885b793",
        "gcc-198d1270-4cef-480e-a98f-97ac5ebb3e71",
        "gcc-eb666d9a-720c-4bf8-b05a-1ee261d41810",
        "gcc-ebd5ea4c-1d5f-451e-9e26-814a0296e332"
      ]
  vxType = "reels"
  videoHost = "demos.kpoint.com"
  autoScroll = true;
  loop=true;

}

Input Parameters

| Parameter | Type | Description | | ------------------------- | ---------- | ----------------------------------------------------------------- | | videoHost | string | Host name of your KPOINT server. | | vxType | string | Type of the fab experience (reels / stories). | | videoIds | string[] | Array of video IDs that should be contained in reels. | | screenToFit | string | none / stretched / zoomed. | | showScrollDownIndicator | boolean | Shows a scroll down indicator in the mobile device. | | loop | boolean | Videos playing continuously in a sequence. | | token | string | JWT Token for private video playback. (private videos) | | kcid | string | KPOINT Client ID used for token verification. | | token_expiry_time | number | The expiration time for the JWT token, specified in minutes. | | embedId | string | A unique identifier used for tracking which page or embed code. | | clientId | string | Client identifier for analytics or personalization. | | widgets | object | KPOINT Interactive widgets config. | | autoScroll | boolean | Next videos continuously when videos end |