Обнаружение изменений разрешения видео

В некоторых кодеках и контейнерах возможно изменение видеоизображения в среднем потоке. Это особенно характерно для видеопотоков в стиле RTC, где разрешение может масштабироваться вверх/вниз на основе доступной полосы пропускания. В других случаях записывающее устройство может быть повернуто, и видео может переворачиваться с портретного на альбомный или наоборот.

При воспроизведении этих видео на веб-странице (простой тег <video>), как я могу определить, когда это изменение размера происходит с JavaScript?

Лучшее, что я могу придумать, - это проверить размер видео в каждом кадре, но для этого метода существует довольно много накладных расходов. Если бы был способ, чтобы обратный вызов срабатывал, когда видео изменяло размеры или инициированное событие, это было бы лучше.

Пример видео, размер которого сильно изменяется: https://bugzilla.mozilla.org/attachment.cgi?id=8722238

Ответы

Ответ 1

Вы можете использовать событие loadedmetadata для определения глобальных переменных или использовать Element.dataset для отражения начальных .videoWidth, .videoHeight свойств элемента <video>; в timeupdate событии <video> изначально сохраненных и текущих событий .videoWidth, .videoHeight, если одно из свойств изменило функцию вызова

window.onload = function() {
  function handleResolutionChange(event) {
    // do stuff if `.videoWidth` or `.videoHeight` changed from initial value
  }
  var video = document.querySelector("video");
  video.addEventListener("loadedmetadata", function(event) {
    event.target.dataset.width = event.target.videoWidth; 
    event.target.dataset.height = event.target.videoHeight;
  })
  video.addEventListener("timeupdate", function(event) {
    if (+event.target.dataset.width !== event.target.videoWidth
        && +event.target.dataset.height !== event.target.videoHeight) {
          // call `handleResolutionChange` one or more times
          // if `event.target` `.videoWidth` or `.videoHeight` changed
          handleResolutionChange.call(event.target, event)
    }
  })
}