Установка

Подключение скриптов

Вставляем в любое место на странице:

<script src="https://cdn.videotronic.io/js/videotronic.js" type="module"  async></script>
<script>
    (window.videotronic = window.videotronic || {cmd:[]}).cmd.push({
        init:{userId: '[userId]'}
    });
</script>
                    

, где:

Подключение стилей

Все необходимые стили подгружаются автоматически, по умолчанию ничего, кроме скриптов, грузить не нужно. Тем не менее, нужно время для загрузки стилей, до этого момента плеер будет иметь нулевые размеры.

Чтобы избежать ухудшения показателей CLS (когда страница "дергается" в процессе загрузки) рекомендуется добавлять минимальные стили для плеера (размер и фон) на страницу самостоятельно, по умолчанию стили такие:

<style>
    videotronic-player{
        display:block;
        width:100%;
        aspect-ratio:16/9;
        background-color:#000;
    }
</style>
                

Более подробную информацию о размерах смотри на странице размеры плеера

Разметка

Следующая разметка вставляется в то место, где планируется размещение видеотроника:

<videotronic-player
    data-video-src = "https://cdn.videotronic.io/assets/video/example-720.mp4"
    data-video-controls
></videotronic-player>
                    

настройки плеера задаются при помощи атрибутов, подробнее смотри здесь