VKVideo. Виджет для вставки видео

VKVideo. Виджет для вставки видео.

1 Общее описание

• Видеохостинг VK Video: https://vk.com/video.
• Информация по интеграции: https://dev.vk.com/ru/widgets/video

2 Подключение виджета

• Загрузите видео на платформу ВКонтакте.
• Откройте видео в плеере и нажмите на кнопку Экспортировать.
• В появившемся окне скопируйте код видео.
• Вставьте код на страницу сайта.
• Пример кода:

  <iframe src="https://vk.com/video_ext.php?oid=-22822305&id=456241864&hd=2" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture;" frameborder="0" allowfullscreen></iframe>
  

3 Параметры для видео

• oid : идентификатор владельца видео: пользователя или сообщества.
  • ID сообщества указывается со знаком минус -.
• id : идентификатор видео.
• hash : ключ доступа, выдаётся при экспорте.
• hd : Разрешение видео. Возможные значения:
  • 640 x 360;
  • 853 x 480;
  • 1280 x 720;
  • 1920 x 1080.
• t : отметка времени, начиная с которого, будет воспроизводится видео.
  • Указывается в формате 00h00m00s, где h — часы, m — минуты, s — секунды.
• autoplay : включить автоматическое воспроизведение после загрузки видео. Возможные значения:
  • 1 — включить;
  • 0 либо не указано — не включать.
• loop : зацикливать воспроизведение видео.
• js_api : использовать JavaScript API для управления виджетом.

4 Управление виджетом

• Можно управлять виджетом из JavaScript-кода на странице: контролировать видеоплеер и отслеживать состояние воспроизведения, подписавшись на события.

4.1 Подключение

• Подключите скрипт:

  <script src="https://vk.com/js/api/videoplayer.js">
  

• Добавьте в адрес видео в коде скопированного виджета параметр &js_api=1:

  <iframe src="https://vk.com/video_ext.php?oid=-22822305&id=456241864&hd=2&js_api=1" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture;" frameborder="0" allowfullscreen ></iframe>
  

• Создайте инстанс видеоплеера:

  const player = VK.VideoPlayer(iframe);
  

4.2 Методы

4.3 События

• С помощью метода on(event:String, listener:Function) можно подписаться на события.
• Список доступных значений событий плеера доступен в коде через объект VK.VideoPlayer.Events.

4.4 Объект state

• Обработчики всех событий возвращают объект state.
• Список доступных значений соcтояний плеера доступен в коде через объект VK.VideoPlayer.States.

Пример объекта state:

{
    "state": "playing",
    "volume": 0.7,
    "muted": "false",
    "time": 321,
    "duration": 600
}