javascript - the - webm html5 video

Obtención del ancho y alto del video HTML5 real

Question

Tengo un elemento de video:

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

Y estoy recuperando su fuente a través de getUserMedia() en 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);
    }
);

El problema es que necesito saber el "área activa" del video, y me está devolviendo 0:

video.onloadedmetadata = function(){

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

Entonces, ¿cómo puedo recuperar los valores reales ?:

Answer 1

"loaddata" solo debe disparar una vez. Es mejor usar "timeupdate" para verificar repetidamente si el ancho y la altura del video se han configurado, en particular con getUserMedia, donde realmente no se detiene el video, sino que se reproduce directamente.

Answer 2

Debe agregar un loadeddata eventos de datos loadeddata al video e intentar leer el tamaño en ese momento, que es cuando se ha descodificado suficiente información sobre el flujo y las dimensiones se pueden determinar con precisión.

Sin embargo, a veces se necesita un poco en algunos casos para preparar las dimensiones, por lo que es posible que desee probar varias veces (con retraso) hasta que funcione.

Esa podría ser la razón por la que no está funcionando para ti, pero está funcionando para Sam.

Aquí es cómo verifico el tamaño del video, con varios intentos si es necesario, en mi biblioteca de gumhelper: https://github.com/sole/gumhelper/blob/master/gumhelper.js#L38

Observe cómo lo intentamos varias veces y, si no funciona, nos "damos por vencidos" y, de forma predeterminada, vamos a 640x480.

Answer 3

En realidad, esto parece ser un error en FF: https://bugzilla.mozilla.org/show_bug.cgi?id=926753

Answer 4

Hay dos problemas aquí:

1. video.videoWidth propiedades video.videoWidth y video.videoHeight no se establecieron tan pronto como se loadedmetadata evento loadedmetadata . Esto fue un error en FireFox , que ahora está arreglado (gracias a @Martin Ekblom por señalar el error).
2. El video en sí no ocupa toda el área del elemento de video, que ninguna de las respuestas parece haber abordado. En su lugar, se ajusta para encajar dentro del elemento.

No creo que haya una forma directa de obtener las dimensiones del área activa, pero después de luchar con esto, escribí una solución para calcularla a partir de los valores que sí sabemos:

function videoDimensions(video) {
  // Ratio of the video''s 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''s 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
  };
}

Esencialmente, tomamos la relación de aspecto del elemento de video, la relación de aspecto del video y las dimensiones del elemento de video, y usamos esos para determinar el área que ocupa el video.

Esto supone que el método de adaptación del video no se ha modificado a través de CSS (no estoy seguro si eso es posible en este momento, pero la especificación lo permite). Para obtener más detalles sobre eso y algunas otras cosas, consulte la publicación del blog que escribí ( "Cómo encontrar las dimensiones reales del área activa de un video HTML5" ), inspirada en esta pregunta y en su falta de respuestas completas.

Es interesante observar que, aunque la especificación menciona específicamente los posibles bordes de un video (letterboxing y pillarboxing), no pude encontrar ninguna otra mención de él, aparte de su pregunta.