HTMLVideoElement: свойство videoHeight

Только для чтения свойство интерфейса HTMLVideoElement указывает на внутреннюю высоту видео, выраженную в пикселях CSS. Проще говоря, это высота медиа в его естественном размере.

Целочисленное значение, определяющее внутреннюю высоту видео в пикселях CSS. Если состояние элемента readyState равно HTMLMediaElement.HAVE_NOTHING, то значение этого свойства равно 0, поскольку информация о размерах ни видео, ни кадра-плаката еще недоступна.

Пользовательский агент (user agent) рассчитывает внутреннюю ширину и высоту медиа элемента, начиная с исходной ширины и высоты пикселей медиа, затем учитывая такие факторы, как:

• Соотношение сторон медиа (aspect ratio).
• Чистая область медиа (подпрямоугольник, расположенный по центру медиа, который соответствует целевому соотношению сторон).
• Разрешение целевого устройства.
• Другие факторы, необходимые для формата медиа.

Если в данный момент отображается не отрендеренное видео, а кадр-плакат, то внутренние размеры кадра-плаката рассматриваются как размеры <video> элемента.

Если в любой момент внутренние размеры медиа меняются, а состояние элемента readyState не HAVE_NOTHING, то событие resize будет отправлено элементу <video>. Это может произойти при переключении с отображения кадра-плаката на отображение видео или при изменении отображаемой дорожки видео.

Этот пример создаёт обработчик события resize, который изменяет размеры элемента <video> для соответствия внутренним размерам его содержимого.

let v = document.getElementById("myVideo");

v.addEventListener(
  "resize",
  (ev) => {
    let w = v.videoWidth;
    let h = v.videoHeight;

    if (w && h) {
      v.style.width = w;
      v.style.height = h;
    }
  },
  false,
);

Обратите внимание, что это изменение применяется только если и ширина, и высота videoWidth и videoHeight не равны нулю. Это предотвращает применение неверных изменений, когда точная информация о размерах ещё не доступна.