Примитив a-video

Примитив a-video используется для интеграции видеоконтента в сцены виртуальной реальности, создавая объекты, которые воспроизводят видеофайлы или потоковое видео на 2D-поверхности внутри 3D-пространства. Он расширяет возможности стандартного примитива a-plane за счёт прямой поддержки видео как текстуры.

Синтаксис и базовое использование

Базовое определение примитива выглядит следующим образом:

<a-scene>
  <a-video src="#video1" position="0 1.5 -3" width="4" height="2.25" autoplay loop></a-video>

  <video id="video1" src="video.mp4" crossorigin="anonymous"></video>
</a-scene>

Ключевые моменты:

  • src — идентификатор <video> или ссылка на видеофайл. Можно использовать локальный файл или URL.
  • position — координаты объекта в 3D-пространстве.
  • width и height — размеры видео-плоскости. По умолчанию сохраняется пропорция видео.
  • autoplay — автоматический старт воспроизведения.
  • loop — повтор воспроизведения после окончания.

Атрибуты и свойства

a-video поддерживает стандартные атрибуты примитива a-entity и собственные свойства:

  1. src Может быть:

    • Селектором на <video> в DOM (например, #myVideo).
    • URL прямой ссылки на видео (src="https://example.com/video.mp4").

  2. autoplay Автоматически запускает воспроизведение при загрузке сцены. Для браузеров с ограничениями воспроизведения видео без взаимодействия требуется атрибут muted, иначе autoplay не сработает.

  3. loop Включает зацикливание видео.

  4. crossorigin Для использования видео с других доменов. Рекомендуется anonymous для корректной загрузки текстуры.

  5. poster Позволяет установить изображение-заглушку до начала воспроизведения.

  6. playbackRate Управление скоростью воспроизведения видео (1 — стандартная скорость).

  7. volume Контролирует громкость воспроизведения (0–1).

  8. rotation, scale Как и для любого a-entity, можно изменять ориентацию и масштаб плоскости с видео.

Взаимодействие с видео через JavaScript

Видео, встроенное в сцену через a-video, может управляться динамически. Пример:

const videoEl = document.querySelector('#video1');
const aVideo = document.querySelector('a-video');

aVideo.addEventListener('click', () => {
  if (videoEl.paused) {
    videoEl.play();
  } else {
    videoEl.pause();
  }
});

Такой подход позволяет создавать интерактивные видеопанели в VR, реагирующие на события mouseenter, mouseleave, click или кастомные события.

Поддержка форматов и производительность

  • A-Frame использует HTML5 <video> как источник текстуры, поэтому поддерживаются форматы, совместимые с браузером: .mp4, .webm, .ogv.
  • Виртуальная сцена в WebVR/WebXR накладывает ограничения на размер видео: для высокой производительности рекомендуется использовать видео разрешением до 1080p.
  • Текстуры видео обновляются каждый кадр, что может нагружать GPU при множестве видео одновременно.

Дополнительные возможности

  • Привязка видео к объектам сцены: a-video можно вставлять как текстуру на любые геометрические объекты через <a-material> с типом src: #video1.
  • Мультиплеер: Можно синхронизировать несколько видео одновременно, управляя их воспроизведением через JavaScript.
  • VR-интерактивность: Объект с a-video можно поместить на стену, пол или любую плоскость, чтобы создать иммерсивный кинозал или интерактивные дисплеи.

Примеры продвинутого использования

  1. Видео с 3D-анимацией
<a-video src="#video1" position="0 1.5 -3" rotation="0 45 0" width="5" height="2.8"></a-video>

Видео не только воспроизводится, но и повернуто в пространстве, создавая эффект экранной панели в VR.

  1. Видео как текстура на объекте
<a-box width="4" height="2" depth="0.1">
  <a-material src="#video1"></a-material>
</a-box>

Видео проецируется на поверхность куба, что позволяет создавать динамичные интерфейсы или декоративные элементы сцены.

  1. Контролируемое воспроизведение через события
document.querySelector('a-video').addEventListener('mouseenter', () => {
  document.querySelector('#video1').play();
});
document.querySelector('a-video').addEventListener('mouseleave', () => {
  document.querySelector('#video1').pause();
});

Такой подход реализует “hover-to-play”, что удобно для интерактивных презентаций в VR.

Рекомендации по использованию

  • Для оптимизации производительности использовать видео с размерами, соответствующими реальному масштабу плоскости.
  • При работе с несколькими видео в одной сцене — применять preload="auto" и проверять поддержку формата браузером.
  • Использовать muted для автозапуска, чтобы обойти ограничения современных браузеров.

Примитив a-video является мощным инструментом для интеграции видео в A-Frame, сочетая гибкость текстур и интерактивность VR-сцен, что позволяет создавать как простые видеопанели, так и сложные мультимедийные интерфейсы.

Оглавление