video

Видео блок.

Свойства

src*: { mp4, width?, height?} | { hls, width?, height?}

Параметры исходного видео. Можно указать путь к видио в формате MP4 или HLS

• mp4: string

  Строка с URL исходника в формате MP4.

• hls: string

  Строка с URL исходника в формате HLS.

• width: number

  Ширина исходника. Указывается вместе с height. Указание и width, и height необходимо для определения пропорций размера <video> блока. Заданный размер исходника может отличаться от реального и именно он учитывается при отображении. При несовпадении заданных пропорций с таковыми исходника, он вписывается в заданные пропорции согласно resizeMode.

  Если размеры исходника не указаны, пропорции расчитаваются по poster после его загрузки. Если пропорции poster отличаются от 16:9, возможен визульный скачёк пропорций <video> блока после зугрузки poster. Если не указан и poster, или его загрузка ещё не осуществлена, пропорции принимаются как 16:9.

• height: number

  Ширина исходника. См. width выше.

poster: string

URL изображения предварительного просмотра видео. См. src.width выше на предмет возможного влияния poster на пропорции всего блока <video>.

autoplay: bool

По-умолчанию: false

Автоматическое воспроизведение видео при открытии страницы. В браузерах, если открытие было по внешней ссылке и сайт не внесён в закладки, видео стартует без звука. Пользователь может включить звук нажав на соответствующий значёк управления в блоке.

muted: bool

По-умолчанию: false

Воспроизведение видео без звука. Пользователь не может включить звук.

loop: bool

По-умолчанию: false

Циклическое воспроизведение звука.

controls: VideoControls

По-умолчанию: compact

Элементы управления видео.

• full — элементы внизу блока, с полосой перемотки.

• compact — элементы по центру, с кнопками перемотки вместо полосы.

• mini — только кнопки плэй и пауза.

• none — только исходная кнопка плей.

preferredQuality: number

Предпочитаемое качество воспроизведения. Не гарантируется совпадения настоящего качества воспроизведения с предпочитаемым.

Примеры значений:

• 360
• 480
• 720
• 1080

resizeMode: Resize

По-умолчанию: contain

Метод размещения видео в случае отличия пропорций отображения от исходника.

• cover — Видео вписывается закрыв всю область отображения. Часть видео что не вписывается в область становится не видна. Пропорции сохраняются.

• contain — Видео умещается целиком, с отступами по сторонам с недостающими данными. Пропорции сохраняются.

• stretch — Видео растягивается по границам области. Пропорции игнорируются.

onVideoEnd: Action

По-умолчанию: false

Действие вызываемое по окончании видео.

style

Изменение внешнего вида, расположения и геометрии блока.

• width : number | percentage

Ширина блока в процентах или пикселях. По умолчанию, если известны, используются либо src.width, либо ширина poster. В противном случае ширина принимается в 100% если flexDirection родительского контейнера задан как column.

• height : number | percentage

Высота блока в процентах или пикселях. По умолчанию, если известны, используются либо src.height, либо высота poster. В противном случае высота принимается в 200 пикселей если flexDirection родительского контейнера задан как row.

• maxWidth, minWidth
  Ширина блока. Подробнее.

• maxHeight, minHeight
  Высота блока. Подробнее.

• margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft
  Внешние отступы блока. Подробнее.

• position
  Метод позиционирования блока: relative или absolute. Подробнее.

• top, right, bottom, left
  Смещение относительно исходной позиции. Подробнее.

• border
  Задание границ для блока по всем четырём сторонам: толщина стиль и цвет. Подробнее.

• borderTop, borderRight, borderBottom, borderLeft
  Задание индивидуальных границ для сторон блока: толщина и цвет. Подробнее.

• borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius
  Скругление углов границ. Подробнее.

• borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
  Толщина границ. Подробнее.

• borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
  Цвет границ. Подробнее.

• backgroundColor
  Цвет фона блока. Подробнее.

• backgroundGradient
  Градиент фона блока. Подробнее.

• opacity
  Непрозрачность всего блока с его содержимым. Подробнее.

• elevation
  Высота тени. Подробнее.

• shadowColor
  Цвет тени блока. Подробнее.

• flexBasis
  Исходный размер блока по главной оси контейнера. Подробнее.

• flexGrow
  Коэффициент роста блока по главной оси контейнера. Подробнее.

• flexShrink
  Коэффициент сжатия блока по главной оси контейнера. Подробнее.

• flex
  Задаёт поведение размера блока (рост сжатие и исходный размер) по главной оси контейнера. Подробнее.

• alignSelf
  Выравнивание конкретного блока поперёк главной оси контейнера. Подробнее.

Пример

---

Минимальный пример, без poster. До начала воспроизведения отображается только чёрный прямоугольник.

---

Пример аналогичный предыдущему, но с вертикальным видео. Без указания размера исходного видео или poster, видео вписывается в пропорции горизонтального 16:9.

---

Вертикальное видео с poster. Размер блока адаптируется под размер poster. Возможен скачёк размеров блока при открытии страницы в процессе загрузки poster.

---

Вертикальное видео с poster и указанием размера исходного видео. Размер блока адаптируется под пропорции исходного видео. Блок сразу отображается в нужном размере, без скачка в процессе загрузки страницы.

---

Стилями блоку указаны размеры с пропорцями отличными от таковых видео. Задан resizeMode='cover' вписывающий видео закрыв всю область отображения. Часть видео что не вписывается в область становится не видна. Пропорции сохраняются.

---

Стилями блоку указаны размеры с пропорцями отличными от таковых видео. Задан resizeMode='stretch' растягивающий видео по границам области. Пропорции игнорируются.

---

Блок с controls='full'.

---

Блок с controls='compact'.

---

Блок с controls='mini'.

---

Блок с controls='none'.

---

Блок с onVideoEnd. Покажет всплывающее сообщение по окончании возпроизведения видео.

---