SDK видеоплеера для IFrame
Вы можете разместить видеоплеер с контентом из Cloud Video на HTML-странице с помощью SDK видеоплеера для IFrame.
Добавьте в код страницы iframe
<iframe
frameborder="0"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock"
src="https://runtime.video.cloud.yandex.net/player/...?autoplay=1&mute=1"
></iframe>
Где https://runtime.video.cloud.yandex.net/player/...
— ссылка на воспроизводимый контент, например https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y
. Подробнее см. в разделах Получить код вставки или ссылку на видео и Получить код вставки или ссылку на трансляцию.
Код вставки содержит iframe-контейнер, в котором отображается плеер с указанным видео.
Вы также можете настроить размер видео и параметры запуска плеера.
Настроить размер видео
Чтобы указать размер видео, задайте в теге iframe
параметры: height
— высота и width
— ширина.
Пример:
<iframe width="560" height="315"
frameborder="0"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock"
src="https://runtime.video.cloud.yandex.net/player/..."
></iframe>
Чтобы подстроить видео под ширину контейнера, измените код вставки так:
<div style="min-width: 100%">
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock"
src="https://runtime.video.cloud.yandex.net/player/...?autoplay=1&mute=true"
></iframe>
</div>
</div>
Настроить параметры запуска плеера
Вы можете настроить отображение плеера и воспроизведение видео с помощью специальных параметров.
К URL кода вставки после символа ?
добавьте пары параметр=значение
, разделяя их символом &
:
https://runtime.video.cloud.yandex.net/player/...?{param1=value1}&...&{paramN=valueN}
Список параметров и их значений приведен в таблице ниже. Если параметры не указаны, плеер загрузится с параметрами по умолчанию.
Параметр: |
Описание: |
|
Автоматически запускать видео без звука при загрузке плеера:
Параметр |
|
Автоматически запускать видео при загрузке плеера:
Значение по умолчанию — Чтобы автозапуск видео корректно работал во всех браузерах, используйте параметр |
|
С помощью параметра можно скрыть элементы интерфейса плеера. По умолчанию отображаются все. Список элементов интерфейса
Чтобы скрыть несколько элементов интерфейса, передайте строку со значениями через запятую, например |
|
Язык, на котором будет отображаться интерфейс плеера. Список языков
Если параметр не указан или передано неподдерживаемое значение, язык интерфейса плеера будет определяться на основании данных пользователя. |
|
Зацикливать воспроизведение видео:
Значение по умолчанию — |
|
Выключать звук при загрузке плеера:
Значение по умолчанию — |
|
Останавливать воспроизведение видео при уходе из зоны видимости и начинать воспроизведение при нахождении в ней. Параметр влияет на показ как видеоконтента, так и рекламных роликов. Он может принимать значения:
Значение по умолчанию — Примечание При |
|
Предварительно загружать видео:
Значение по умолчанию — При |
|
Громкость звука при загрузке плеера. Может принимать значения от Значение параметра игнорируется, если |
Пример
В примере видео будет запущено автоматически, но без звука:
<iframe
frameborder="0"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock"
src="https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y?autoplay=1&mute=true"
></iframe>