Встроить видеоплеер

Подключение

<script src="https://yastatic.net/vh-player/loader.js"></script>
<script>
    var player = new Yandex.VH.Player(containerId, paramsObject);
</script>

API кода вставки

containerId: string — id контейнера, в который будет встроен плеер VH.

paramsObject — javascript-объект со свойствами:

Свойство

Тип

Описание

contentId

string

Обязательный параметр.
Id видео, которое необходимо встроить на страницу.

width

number/string

Ширина iframe c песочницей плеера VH.

height

number/string

Высота iframe c песочницей плеера VH.

params

object

Объект с get-параметрами, подробнее см. Параметры запуска плеера.

adConfig

object

Объект настроек рекламы.

amp

boolean

Параметр для включения поддержки AMP-страниц.

Пример:

var player = new Yandex.VH.Player('player1', {
    contentId: '14900627828921839597',
    width: 1200,
    height: 620,
    adConfig: {
        adBreaks: [
            { adFoxParameters: {} }
        ]
    },
    params: {
        autoplay: 0,
        mute: 1,
        tv: 0,
        loop: 1,
        preload: 0
    }
});

Методы

Метод

Описание

play()

Запустить воспроизведение.

pause()

Поставить плеер на паузу.

mute()

Выключить звук у плеера.

unmute()

Включить звук у плеера.

 

setQuality(quality: 
'small' | 'medium' | 
'large' | 'hd720' | 
'hd1080' | 'highres' | 
'default')

Установить качество видео.

seek(time: number)

Перемотать воспроизведение на нужный момент.

setVolume(volume: number)

Изменить громкость.

setSource (contentId: string, params: object)

Изменить источник видео без пересоздания плеера: contentId — id видео, на которое нужно переключить плеер; params — объект с get-параметрами, подробнее см. Параметры запуска плеера.

on(event: string, listener)

Подписать на событие.

once(event: string, listener)

Одноразово подписать на событие.

off(event: string, listener)

Отписать от события.

enableMiniPlayer (positionConfig, sizeConfig)

Вынести плеер на фиксированную позицию на экране. На вход принимает аргументы positionConfig и sizeConfig.

disableMiniPlayer()

Вернуть плеер на изначальную позицию.

resizeMiniPlayer (sizeConfig)

Изменить высоту и ширину плеера.

destroy()

Удалить плеер.

События

В информации о событии приходят поля:

{
    isMuted: {boolean};
    time: {number};
}

isMuted

Показывает, выключен ли звук у плеера.

time

Текущее время воспроизведения.

Событие

Описание

inited

Вызывается при готовности плеера.

started

Вызывается при начале воспроизведения:

• contentId: {string} — идентификатор видео;

• duration: {number} — продолжительность видео;

• description: {string} — описание видео;

• title: {string} — название видео.

resumed

Вызывается при продолжении воспроизведния.

paused

Вызывается при постановке плеера на паузу.

ended

Воспроизведение окончено.

error

Событие ошибки:

• message: {string} — сообщение об ошибке.

durationchange

Вызывается при изменении длительности видео.

volumechange

Вызывается при изменении громкости звука:

• volume: {number} — установленное значение громкости.

rewound

Вызывается при перемотке:

• previousTime: {number} — время до перемотки.

adShown

Вызывается при показе рекламы.

adEnd

Вызывается после завершения показа рекламы.

timeupdate

Вызывается по ходу воспроизведения:

• watchedTime: {number} — фактическое время просмотра (без учета перемотки).

MiniPlayer

Позволяет фиксировать плеер на экране на заданной позиции.

Управлять MiniPlayer можно с помощью методов:

Метод

Описание

enableMiniPlayer (positionConfig, sizeConfig)

Фиксирует плеер на экране. Принимает на вход аргументы positionConfig и sizeConfig.

disableMiniPlayer()

Возвращает плеер на изначальную позицию.

resizeMiniPlayer (sizeConfig)

Изменяет стили плеера без анимаций. С помощью этого метода можно изменить только width и height.

Метод используется для того, чтобы можно было изменить стили плеера, когда он находится в состоянии miniPlayerEnabled.

API ленты видеоконтента

Лента видеоконтента позволяет проигрывать несколько роликов один за другим по кругу.

{
  containerId: {string},
  contentIds: {string[]},
  parameters: {array}
}

containerId ID контейнера, в который будет встроен плеер.

contentIds Массив идентификаторов контента в системе VH.

parameters Объект с параметрами встраивания и воспроизведения.

Пример:

var player = Yandex.VH.createPlayList(
    'player-container',
    [
        '41f3acdf3ef012229db83b8e8b810c28',
        '4af27aa3b15e1f41ab4b0c8933f44d72',
        '46f1793076bb2847b3992bf478bad82f',
        '4a2d0ec3d6dd94719ae4122eddfc5961',
        '4f86d7fb5a3c0855b30c0519b71ec8d2'
    ],
    {
        width: 600,
        height: 360,
        params: {
            autoplay: 1,
            tv: 0,
            loop: 0,
            preload: 0,
            meta: 'always'
        }
    }
);

Рекомендации по встраиванию

Минимальный размер плеера

Требования по минимальному размеру плеера указаны в п. 4.3.2 Правил участия в Рекламной сети Яндекса.

Для соблюдения этих требований на мобильных устройствах можно фиксировать контейнер в области видимости на меленьких экранах через CSS media-queries.

Пример:

#player-container {
    position: fixed;
    bottom: 30px;
    right: 50px;
    width: 320px;
    height: 180px;
    background: #939cb0;
}
@media (max-width: 360px) {
    #player-container {
        bottom: 0;
        right: 0;
        height: 180px;
        width: 100%;
    }
}

positionConfig

Задает положение плеера на странице.

positionConfig = {
    bottom?: number,
    top?: number,
    right?: number,
    left?: number
}

bottom Нижняя позиция вынесенного плеера относительно нижней границы окна браузера в px. Имеет преимущество перед параметром top.

top Верхняя позиция вынесенного плеера относительно верхней границы окна браузера в px.

right Правая позиция вынесенного плеера относительно правой границы окна браузера в px. Имеет преимущество перед параметром left.

left Левая позиция вынесенного плеера относительно левой границы окна браузера в px.

sizeConfig

Задает размеры плеера.

sizeConfig = {
    width?: number,
    height?: number
}

width Ширина вынесенного плеера в px.

height Высота вынесенного плеера в px.

Поддержка AMP-страниц

Плеер Яндекса на базовом уровне поддерживает AMP-страницы c помощью тега <amp-video-iframe>.

Примечание

Методы, события и некоторые особенности VH Public API не работают для плеера в режиме amp. При этом поддержа adFox сохраняется.

Чтобы включить поддержку AMP-страниц:

• Задайте параметры paramsObject.amp = true

• Укажите параметры paramsObject.width и paramsObject.height

• Подключите на страницу скрипт для работы <amp-video-iframe>

<script async custom-element="amp-
video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>

Пример:

var player = new Yandex.VH.Player('player1', {
    contentId: '14900627828921839597',
    width: 1200,
    height: 620,
    amp: true
});

Чем режим поддержки AMP-страниц отличается от обычнного режима

Для поддержки AMP-страниц используется специальная песочница amp-vh-player, которая:

• реализует интеграционный скрипт;

• защищает плеер Яндекса от сторонних скриптов.

VH Public API в режиме поддержки AMP-страниц представляет следующую структуру:

Предыдущая
Создать ленту видеорекомендаций
Следующая
Обратная связь
В этой статье: