Concept

VideoKit provides two UI components: Player and Uploader. The Player allows you to efficiently play a single video or a playlist of videos with minimal loading time while Uploader is responsible for uploading videos to the platform. There are two main ways to create a UI component and embed it in an application or a web page.

Using JavaScript

You can create it as an instance of component class.

const player = new Player(document.getElementById('player'), {
  autoPlay: true,
  showControls: false
})

or

const player = new Player({
  autoPlay: true,
  showControls: false
})

document.getElementById('player').append(player.element)

Using custom HTML tags

And you can also embed a UI component to your page using special HTML tags.

<vk-player
  data-auto-play="true"
  data-show-controls="false">
</vk-player>

These HTML tags will be initialized automatically when VideoKit and DOM are loaded. If you inserted a UI component tag after page loading, then you need to call the UI.initComponents() method to let VideoKit know that it should look for new element and initialize it. Parameters of UI components for custom HTML tags should be passed as data attributes.

To get an instance of a component created using custom HTML tags, you can use the following:

const player = UI.getInstance(rootPlayerElement)