Interface: Player

Full-featured Vindral player web component with built-in controls.

Introduction

Welcome to our modern, Web-Component-based video player designed with performance, customization and ease of integration in mind. It gives you seamless playback controls, adaptive streaming capabilities and a consistent user experience across devices.

Usage

JavaScript

import { registerComponents } from "@vindral/web-sdk/player"

registerComponents()

HTML

<vindral-player
  url="https://lb.cdn.vindral.com"
  channel-id="vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f"
  min-buffer-time="1000"
></vindral-player>

Attributes

Attribute	Type	Description	Default
url	string	URL to use when connecting to the stream	https://lb.cdn.vindral.com
channel-id	string	Channel ID to connect to initially	N/A
channel-group-id	string	Channel group to connect to	N/A
paused	boolean	If set, the player will start in a paused state	false
muted	boolean	If set, the player will start muted	false
authentication-token	string	Authentication token for channels with authentication enabled	N/A
cast	boolean	If set to "false", disables cast functionality	true
airplay	boolean	If set, enables AirPlay functionality	false
pip	boolean	If set to "false", disables Picture-in-Picture functionality	true
fullscreen	boolean	If set to "false", disables fullscreen functionality	true
poster	boolean | string	URL of the image to show before the video plays	true
cast-receiver-id	string	For custom Cast Receivers, enter your Application Id here	N/A
cast-background	string	Background image or color for Cast devices	N/A
language	string	Initial language to use when multiple languages are available	N/A
text-track	string	Initial text track	N/A
log-level	error | warn | info | debug | trace | off	Sets the log level	info
min-buffer-time	number	Sets the minimum and initial buffer time	N/A
max-buffer-time	number	Sets the maximum buffer time allowed	N/A
size-based-resolution-cap-enabled	boolean	Enables or disables user bandwidth savings by capping the video resolution to the size of the video element	true
burst-enabled	boolean	Enable bursting for initial connection and channel switches	false
mse-enabled	boolean	Enable usage of the MediaSource API on supported browsers	true
mse-opus-enabled	boolean	Enable Opus with the MediaSource API on supported browsers	true
ios-background-play-enabled	boolean	Enable or disable support for playing audio in the background for iOS devices	false
abr-enabled	boolean	Enable or disable Adaptive Bit Rate	true
telemetry-enabled	boolean	Enable or disable telemetry. This allows for telemetry and errors being collected	true
max-size	{ width: number; height: number}	Set a cap on the maximum video size	N/A
max-audio-bit-rate	number	Maximum audio bit rate allowed	N/A
max-video-bit-rate	number	Maximum video bit rate allowed	N/A
max-initial-bit-rate	number	Maximum initial bitrate for ABR	N/A
ios-wake-lock-enabled	boolean	Enable wake lock for iOS devices	false
ios-media-element-enabled	boolean	Enables iOS devices to use a media element for playback	true
media	audio | video | audio+video	Set the type of media to play (audio only, video only, or both)	audio+video
video-codecs	h264 | av1	Comma-separated list of video codecs to use, in order of priority (e.g., "av1,h264")	N/A
advanced	string	Advanced options in JSON format. See AdvancedOptions for details	N/A
drm-headers	string	Comma-separated key:value pairs for license request headers	N/A
drm-queryparams	string	Comma-separated key:value pairs for license request query params	N/A
drm-widevine-video-robustness	string	Comma-separated list of Widevine video robustness levels (e.g., "SW_SECURE_CRYPTO,SW_SECURE_DECODE")	N/A
drm-widevine-audio-robustness	string	Comma-separated list of Widevine audio robustness levels (e.g., "SW_SECURE_CRYPTO")	N/A
drm-playready-video-robustness	string	Comma-separated list of PlayReady video robustness levels (e.g., "150,2000")	N/A
drm-playready-audio-robustness	string	Comma-separated list of PlayReady audio robustness levels (e.g., "150")	N/A
timeshift	boolean	If set to "false", disables timeshift/seek functionality	false
volume	number	Initial volume level (0-1)	1
title	boolean | string	Document title to display. If true, uses channel name	false

Properties

Attribute	Type	Description	Default
instance Read only	Vindral	Vindral client instance, available after the 'vindral-instance-ready' event is fired	N/A

Events

Event	Description
vindral-instance-ready	Fired when the Vindral instance is ready for use

CSS Variables

This is the list of CSS variables for showing/hiding specific controls.

vindral-player {
  /* Hide all controls */
  --vindral-ui-display: none;

  /* Individual control visibility */
  --vindral-play-button-display: none;
  --vindral-mute-button-display: none;
  --vindral-airplay-button-display: none;
  --vindral-pip-button-display: none;
  --vindral-fullscreen-button-display: none;
  --vindral-cast-button-display: none;
  --vindral-grid-button-display: none;
  --vindral-grid-item-offline-display: none;
  --vindral-volume-range-display: none;
  --vindral-rendition-menu-display: none;
  --vindral-language-menu-display: none;
  --vindral-play-overlay-display: none;
  --vindral-buffering-overlay-display: none;
  --vindral-poster-overlay-display: none;
  --vindral-live-button-display: none;
  --vindral-seek-bar-display: none;
}

These CSS variables allow you to customize the appearance of the player.

vindral-player {
  /* Colors */
  --vindral-fg-strong: #eeeeee;
  --vindral-fg-subtle: #b4b4b4;
  --vindral-fg-extra-subtle: #7b7b7b;

  --vindral-bg-strong: #111111;
  --vindral-bg-subtle: #191919;
  --vindral-bg-extra-subtle: #222222;

  --vindral-bg-component: #222222;
  --vindral-bg-component-hover: #2a2a2a;
  --vindral-bg-component-active: #313131;

  /* Spacing */
  --vindral-padding-1: 4px;
  --vindral-padding-2: 8px;
  --vindral-padding-3: 16px;
  --vindral-padding-4: 24px;
  --vindral-padding-5: 32px;
  --vindral-padding-6: 40px;

  /* Controls */
  --vindral-control-padding: 4px;
  --vindral-button-padding: 8px;
  --vindral-button-icon-size: 24px;
  --vindral-play-overlay-icon-size: 72px;
  --vindral-ui-font: Arial, sans-serif;
}

Extends

• HTMLElement