С помощью этого виджета вы сможете добавить на свой сайт видео, загруженное на платформу ВКонтакте, например рекламный ролик, портфолио или интервью с клиентами.
Видео будет встроено на сайт в виде полноценного плеера ВКонтакте. Ролик можно будет посмотреть, поставить отметку «Нравится» и поделиться им с друзьями.
Чтобы встроить видео на сайт, нужно скопировать и вставить код виджета.
Подключение виджета
1.
Загрузите видео на платформу ВКонтакте.
2.
Откройте видео в плеере и нажмите на кнопку Экспортировать.
Вы можете управлять виджетом из JavaScript-кода на вашей странице: контролировать видеоплеер и отслеживать состояние воспроизведения, подписавшись на события.
Подключение
1.
Подключите скрипт:
HTML <script src="https://vk.com/js/api/videoplayer.js">
2.
Добавьте в адрес видео в коде скопированного виджета параметр &js_api=1.
Перемещает воспроизведение на позицию time (в секундах).
setVolume(volume:Number)
Устанавливает громкость. Принимает значение в виде числа с плавающей точкой от 0 до 1.
getVolume()
Возвращает значение громкости в диапазоне от 0 до 1. Тип возвращаемого значения — число с плавающей точкой.
getCurrentTime()
Возвращает текущее время видео в секундах. Возвращаемое значение — целое число.
getDuration()
Возвращает длительность видео в секундах. Возвращаемое значение — целое число.
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
Обновление уровня громкости или включение и отключение звука.
started
Начало воспроизведения видео.
resumed
Возобновление воспроизведения после паузы.
paused
Приостановка воспроизведения.
ended
Завершение воспроизведения.
error
Ошибка воспроизведения.
Список доступных значений событий плеера доступен в коде через объект VK.VideoPlayer.Events.
Объект state
Обработчики всех событий возвращают объект state со следующими полями:
Поле
Тип
Описание
state
string
Состояние плеера. Возможные значения: • uninited — iframe с видео не загрузился и плеер не инициализировался. •unstarted — воспроизведение видео не начиналось. •playing — видео воспроизводится. •paused — воспроизведение приостановлено. •ended — воспроизведение видео завершено. •error — ошибка воспроизведения видео.
volume
number
Текущая громкость воспроизведения в виде числа с плавающей точкой в диапазоне от 0 до 1.