Подтвердить что ты не робот

Получение реальной ширины и высоты видео в формате HTML5

У меня есть элемент видео:

var video = window.content.document.createElement("video");
video.width = width;
video.height = height; 
video.style.backgroundColor = "black";
window.content.document.body.appendChild(video);

И я получаю его источник через getUserMedia() в Firefox:

window.navigator.getMedia = ( window.navigator.getUserMedia || window.navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia || window.navigator.msGetUserMedia);

window.navigator.getMedia( //constraints, sucessCallback, errorCallback
    {video: true, audio: false},
    function(stream) {
        if (window.navigator.mozGetUserMedia) 
            video.mozSrcObject = stream;
        else 
        {
            var vendorURL = window.URL || window.webkitURL;
            video.src = vendorURL.createObjectURL(stream);
        }
        video.play();
    },
    function(err) {
        console.log("Error: " + err);
    }
);

Проблема в том, что мне нужно знать "активную область" видео, и он возвращает мне 0:

video.onloadedmetadata = function(){

    console.log(this.width + "x" +this.height); 
    console.log(this.videoWidth + "x" +this.videoHeight);
}

Итак, как я могу получить РЕАЛЬНЫЕ значения?: enter image description here

4b9b3361

ОТВЕТЫ

Ответ 1

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

Однако в некоторых случаях иногда требуется немного, чтобы размеры были готовы, поэтому вы можете попробовать несколько раз (с задержкой), пока он не будет работать.

Возможно, поэтому он не работает для вас, но он работает на Сэма.

Вот как я могу проверить размер видео с несколькими попытками, если это необходимо, в моей библиотеке gumhelper: https://github.com/sole/gumhelper/blob/master/gumhelper.js#L38

Обратите внимание, как мы пытаемся несколько раз, и если он не работает, мы "сдаемся" и по умолчанию 640x480.

Ответ 2

Здесь есть две проблемы:

  • video.videoWidth и video.videoHeight свойства не устанавливались, как только событие loadedmetadata запускалось. Это была ошибка в FireFox, которая теперь исправлена ​​(спасибо @Martin Ekblom за указание на ошибку).
  • Само видео не затрагивает всю область видеоэлемента, на которую, похоже, не ответили ни один из ответов. Вместо этого он масштабируется, чтобы вписаться в элемент.

Я не думаю, что существует прямой способ получить размеры активной области, но после борьбы с этим я написал решение для вычисления его из значений, которые мы знаем:

function videoDimensions(video) {
  // Ratio of the video intrisic dimensions
  var videoRatio = video.videoWidth / video.videoHeight;
  // The width and height of the video element
  var width = video.offsetWidth, height = video.offsetHeight;
  // The ratio of the element width to its height
  var elementRatio = width/height;
  // If the video element is short and wide
  if(elementRatio > videoRatio) width = height * videoRatio;
  // It must be tall and thin, or exactly equal to the original ratio
  else height = width / videoRatio;
  return {
    width: width,
    height: height
  };
}

По существу, мы принимаем соотношение сторон видеоэлемента, соотношение сторон видео и размеры видеоэлемента и используем их для определения области, в которой занимает видео.

Это предполагает, что метод подгонки видео не был изменен с помощью CSS (не уверен, что это возможно в это время, но спецификация позволяет это). Более подробную информацию об этом и некоторых других вещах см. В сообщении блога, которое я написал (Поиск истинных размеров активной области видео HTML5), вдохновленный этим вопросом и отсутствием полных ответов.

Интересно отметить, что, хотя спецификация специально упоминает возможные края вокруг видео (letterboxing и pillarboxing), я не мог найти никаких других упоминаний об этом, кроме вашего вопроса.

Ответ 3

"loadeddata" должен срабатывать только один раз. Лучше использовать "timeupdate" для многократной проверки, были ли установлены ширина и высота видео, в частности, с помощью getUserMedia, где вы действительно не приостанавливаете видео, но смотрите прямо в режим воспроизведения.