Introduction

Welcome to our web component-based player! This player features an updated design and comes with built-in controls for a seamless viewing experience. It is highly customizable and easy to integrate into your web applications.

Usage

JavaScript

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

registerComponents()

HTML

<vindral-player
  url="https://lb.cdn.vindral.com"
  channelId="vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f"
></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	boolean	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
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
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

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;

  --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;
}

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

vindral-player {
  --vindral-fg-strong: #000000;
  --vindral-fg-subtle: #666666;
  --vindral-fg-extra-subtle: #999999;

  --vindral-bg-strong: #ffffff;
  --vindral-bg-subtle: #f2f2f2;
  --vindral-bg-extra-subtle: #e6e6e6;

  --vindral-bg-component: #cccccc;
  --vindral-bg-component-hover: #b3b3b3;
  --vindral-bg-component-active: #999999;

  --vindral-padding-1: 4px;
  --vindral-padding-2: 8px;
  --vindral-padding-3: 12px;
  --vindral-padding-4: 16px;
  --vindral-padding-5: 32px;

  --vindral-control-padding: 4px;
  --vindral-button-padding: 8px;
  --vindral-ui-font: Arial, sans-serif;
}