Видео
Виджет «Видео» может не работать в браузерах Firefox и Safari из-за включённых блокировщиков. Для стабильной работы отключите защиту от отслеживания в настройках браузера.
С помощью этого виджета вы сможете добавить на свой сайт видео, загруженное на платформу ВКонтакте, например рекламный ролик, портфолио или интервью с клиентами.
Видео будет встроено на сайт в виде полноценного плеера ВКонтакте. Ролик можно будет посмотреть, поставить отметку «Нравится» и поделиться им с друзьями.
Чтобы встроить видео на сайт, нужно скопировать и вставить код виджета.
Подключение виджета
- 1.
Загрузите видео на платформу ВКонтакте.
- 2.
Откройте видео в плеере и нажмите на кнопку Экспортировать.
Видеоплеер ВКонтакте - 3.
В появившемся окне скопируйте код видео.
Видеоплеер ВКонтакте - 4.
Вставьте код на страницу сайта. Пример кода:
HTML<iframe src="https://vk.ru/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>
В источнике видео вы можете указать следующие параметры:
Параметр | Описание |
|---|---|
oid | Идентификатор владельца видео: пользователя или сообщества. ID сообщества указывается со знаком минус -. |
id | Идентификатор видео. |
hash | Ключ доступа, выдаётся при экспорте. |
hd | Разрешение видео. Возможные значения:
• 1 — 640 x 360.
• 2 — 853 x 480.
• 3 — 1280 x 720.
• 4 — 1920 x 1080. |
t | Отметка времени, начиная с которого, будет воспроизводится видео. Указывается в формате 00h00m00s, где h — часы, m — минуты, s - секунды. |
autoplay | Включить автоматическое воспроизведение после загрузки видео. Возможные значения:
• 1 — включить.
• 0 либо не указано — не включать. |
loop | Зацикливать воспроизведение видео. |
js_api | Использовать JavaScript API для управления виджетом. |
Управление виджетом
Вы можете управлять виджетом из JavaScript-кода на вашей странице: контролировать видеоплеер и отслеживать состояние воспроизведения, подписавшись на события.
Подключение
- 1.
Подключите скрипт:
HTML<script src="https://vk.ru/js/api/videoplayer.js"> - 2.
Добавьте в адрес видео в коде скопированного виджета параметр
&js_api=1.HTML<iframe src="https://vk.ru/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> - 3.
Создайте инстанс видеоплеера:
JavaScriptconst player = VK.VideoPlayer(iframe);
Методы
Метод | Описание |
|---|---|
play() | Запускает или возобновляет воспроизведение видео. |
pause() | Приостанавливает воспроизведение видео. |
seek(time:Number) | Перемещает воспроизведение на позицию time (в секундах). |
seekLive() | Перемещает воспроизведение в актуальное состояние прямой трансляции. |
setVolume(volume:Number) | Устанавливает громкость. Принимает значение в виде числа с плавающей точкой от 0 до 1. |
getVolume() | Возвращает значение громкости в диапазоне от 0 до 1. Тип возвращаемого значения — число с плавающей точкой. |
getCurrentTime() | Возвращает текущее время видео в секундах. Возвращаемое значение — целое число. |
getDuration() | Возвращает длительность видео в секундах. Возвращаемое значение — целое число. |
getQuality() | Возвращает значение качества воспроизведения видео. |
mute() | Отключает звук, не влияет на настройку громкости. |
unmute() | Включает звук. |
isMuted() | Возвращает true, если звук отключен, иначе false. |
getState() | Возвращает строку, содержащую значение состояния плеера. Возможные значения:
• uninited — iframe с видео не загрузился и плеер не инициализировался.
•unstarted — воспроизведение видео не начиналось.
•playing — видео воспроизводится.
•paused — воспроизведение приостановлено.
•ended — воспроизведение видео завершено.
•error — ошибка воспроизведения видео |
on(event:String, listener:Function) | Устанавливает обработчик на событие event. Список событий приведён ниже. |
off(event:String, listener:Function) | Удаляет обработчик события event. |
destroy() | Отписывает плеер от всех событий и отключает API, но не удаляет iframe. |
События
С помощью метода on(event:String, listener:Function) можно подписаться на следующие события:
Событие | Описание |
|---|---|
inited | iframe с видео загрузился и плеер инициализировался. |
timeupdate | Обновление текущего времени видео. |
volumechange | Обновление уровня громкости или включение и отключение звука. |
qualitychange | Изменение качества проигрываемого видео. |
started | Начало воспроизведения видео. |
resumed | Возобновление воспроизведения после паузы. |
paused | Приостановка воспроизведения. |
ended | Завершение воспроизведения. |
error | Ошибка воспроизведения. |
adStarted | Начало проигрывания рекламного ролика. |
adCompleted | Окончание проигрывания рекламной секции. |
Список доступных значений событий плеера доступен в коде через объект VK.VideoPlayer.Events.
Объект state
Обработчики всех событий возвращают объект state со следующими полями:
Поле | Тип | Описание |
|---|---|---|
state | string | Состояние плеера. Возможные значения:
• uninited — iframe с видео не загрузился и плеер не инициализировался.
•unstarted — воспроизведение видео не начиналось.
•playing — видео воспроизводится.
•paused — воспроизведение приостановлено.
•ended — воспроизведение видео завершено.
•error — ошибка воспроизведения видео. |
volume | number | Текущая громкость воспроизведения в виде числа с плавающей точкой в диапазоне от 0 до 1. |
muted | boolean | true, если звук выключен, и false, если включен. |
time | number | Текущая позиция воспроизведения в секундах. |
duration | number | Длительность видео в секундах. |
Пример объекта state:
{
"state": "playing",
"volume": 0.7,
"muted": "false",
"time": 321,
"duration": 600
}Список доступных значений соcтояний плеера доступен в коде через объект VK.VideoPlayer.States.
Код виджета
Чтобы добавить виджет на ваш сайт, скопируйте код для вставки на страницу, на которой вы хотите разместить виджет.
