2012-05-09 10 views
14

del elemento de vídeo HTML5 que tienen un simple etiqueta video de HTML5:¿Cómo puedo obtener la anchura y la altura

<video autobuffer="true" id="video" controls="true"> 
     <source src="some_url"></scource> 
    </video> 

no he definir una anchura obvia y la altura en la etiqueta de vídeo o en css, la envoltura de vídeo ajustaría de acuerdo con el tamaño del video fuente, el problema es, ¿cómo puedo obtener el ancho y la altura actuales del video? He tratado jQuery

$('video').css('width'); 

pero me devolver el tamaño origen: 300px

lo que veo en la página es 800px!

¿Cómo puedo resolver este problema?

Respuesta

28
$(function() { 

    $("#video").bind("loadedmetadata", function() { 
     var width = this.videoWidth; 
     var height = this.videoHeight; 
     // ... 

    }); 

}); 
+1

Parece que esto solo funcionará si agrega la función antes de que se cargue el video. ¿Hay una forma general de obtener estos valores para un video que ya se está reproduciendo? –

+1

Bummer. Gracias, sin embargo. –

+0

¿Qué le impide agregarlo antes de su video? Simplemente se sienta allí escuchando el evento de metadatos cargados. – Neil

0

Acabamos de descubrir que podemos obtener el ancho y la altura de vídeo como:

$("#video").innerHeight(); 
$("#video").innerWidth(); 

Estas dos funciones están expuestos por jQuery.

Otra razón por la cual jQuery rocks !!!

+1

Um, de acuerdo con [los documentos] (https://api.jquery.com/innerwidth/), 'innerWidth()' obtendrá 'Obtenga el ancho interior calculado actual (incluido el relleno pero no el borde)'. De acuerdo, la mayoría de los videos no usan relleno, pero podrías fácilmente obtener las dimensiones del elemento de video con 'video.width' y' video.height'. Eso daría el verdadero valor (es decir, sin relleno), es más simple y no utiliza jQuery. Sin embargo, es importante distinguir entre las dimensiones del elemento de video y las dimensiones nativas del video. Lo que encuentran esta respuesta y la anterior son completamente diferentes. – Nateowami

Cuestiones relacionadas