2012-05-09 14 views
14

dell'elemento video HTML5 Ho un semplice tag video HTML5:Come posso ottenere la larghezza e l'altezza

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

non ho definire una larghezza evidente e l'altezza in tag video o in css, il video involucro sarebbe regolare in base alla dimensione del video sorgente, il problema è: come posso ottenere la larghezza e l'altezza del video corrente? Ho provato jquery

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

ma mi restituire la dimensione origine: 300px

quello che vedo nella pagina è 800px!

Come posso risolvere questo problema?

risposta

28
$(function() { 

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

    }); 

}); 
+1

Sembra che funzioni solo se si aggiunge la funzione prima che il video venga caricato. C'è un modo generale per ottenere questi valori per un video che sta già giocando? –

+1

Bummer. Grazie comunque. –

+0

Che cosa ti impedisce di aggiungerlo prima del tuo video? Sta semplicemente seduto lì ad ascoltare l'evento loadedmetadata. – Neil

0

appena scoperto che siamo in grado di ottenere la larghezza e l'altezza come:

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

Queste due funzioni sono esposti da jQuery.

Un altro motivo per cui jQuery oscilla !!!

+1

Um, secondo [i documenti] (https://api.jquery.com/innerwidth/), 'innerWidth()' otterrà la larghezza interna calcolata corrente (incluso il padding ma non il bordo) '. Certo, la maggior parte dei video non usa il padding, ma puoi facilmente ottenere le dimensioni dell'elemento video con 'video.width' e' video.height'. Ciò darebbe il vero valore (cioè senza padding), è più semplice e non usa jQuery. Tuttavia, è importante distinguere tra le dimensioni dell'elemento video e le dimensioni native del video. Ciò che questa risposta e quella sopra stanno trovando sono completamente diversi. – Nateowami

Problemi correlati