· Суббота, 05.07.2025, 10:29
Dp-mpp.org
Вход · Регистрация



Категории раздела
Статьи [5]
скрипты [30]
Статистика

Кто на сайте : 1
Гостей: 1
Пользователи: 0

Вы зашли с: Версия:

Видео

С помощью этого виджета вы сможете добавить на свой сайт видео, загруженное на платформу ВКонтакте, например рекламный ролик, портфолио или интервью с клиентами.

Видео будет встроено на сайт в виде полноценного плеера ВКонтакте. Ролик можно будет посмотреть, поставить отметку «Нравится» и поделиться им с друзьями.

Чтобы встроить видео на сайт, нужно скопировать и вставить код виджета.

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

  1. 1.

    Загрузите видео на платформу ВКонтакте.

  2. 2.

    Откройте видео в плеере и нажмите на кнопку Экспортировать.

    Видеоплеер ВКонтактеВидеоплеер ВКонтакте

  3. 3.

    В появившемся окне скопируйте код видео.

    Видеоплеер ВКонтактеВидеоплеер ВКонтакте

  4. 4.

    Вставьте код на страницу сайта. Пример кода:

    HTML
    <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>

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

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

Подключение

  1. 1.

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

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

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

    HTML
    <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>
  3. 3.

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

    JavaScript
    const player = VK.VideoPlayer(iframe);

Методы

Метод Описание
play() Запускает или возобновляет воспроизведение видео.
pause() Приостанавливает воспроизведение видео.
seek(time:Number) Перемещает воспроизведение на позицию 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.
muted boolean true, если звук выключен, и false, если включен.
time number Текущая позиция воспроизведения в секундах.
duration number Длительность видео в секундах.

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

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

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

Код виджета

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

Прямая ссылка
Размер видео


 
Код виджета для вставки на сайте
HTML
<iframe src="https://vk.com/video_ext.php?oid=-22822305&id=456241864" width="640" height="360" allow="autoplay; encrypted-media; fullscreen; picture-in-picture;" frameborder="0" allowfullscreen></iframe>

 


Категория: Статьи | Добавил: Modo (15.01.2024)
Просмотров: 274 | Рейтинг: 0.0/0
Вход на сайт
Партнеры
14.07.2024
Категория: Зарубежные фильмы »
Артур и война двух миров Артур и война двух миров
14.07.2024
Категория: Зарубежные фильмы »
Артур и минипуты Артур и минипуты
31.05.2024
Категория: Зарубежные фильмы »
Аксель (2018) Аксель (2018)
31.05.2024
Категория: Зарубежные фильмы »
Атлас 2024 Атлас 2024
22.05.2024
Категория: Зарубежные фильмы »
Артур, ты король Артур, ты король
22.05.2024
Категория: Зарубежные фильмы »
Планета обезьян: Новое царство Планета обезьян: Новое царство
22.05.2024
Категория: Зарубежные Сериалы »
Следопыт 2024 Следопыт 2024
22.05.2024
Категория: Зарубежные Мультфильмы »
Люди Икс ’97 Люди Икс ’97
21.05.2024
Категория: Зарубежные Сериалы »
Защитник 1,2,3,4 сезон Защитник 1,2,3,4 сезон
15.05.2024
Категория: Зарубежные Мультфильмы »
Лига справедливости: Кризис на бесконечных землях. Часть 2 Лига справедливости: Кризис на бесконечных землях. Часть 2
2020-2025