2012-05-09 16 views
14

Ich habe einen einfachen html5-Video-Tag erhalten:Wie kann ich das html5 Video-Element Breite und Höhe

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

Ich habe nicht definiere eine offensichtliche Breite und Höhe in Video-Tag oder in CSS, würde der Video-Wrapper anpassen Je nach Quelle Videogröße, das Problem ist, wie kann ich die aktuelle Breite und Höhe des Videos bekommen? Ich habe versucht, jquery

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

aber es gibt mir die Originalgröße zurück: 300px

, was ich in der Seite zu sehen ist 800px!

Wie kann ich dieses Problem lösen?

Antwort

28
$(function() { 

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

    }); 

}); 
+1

Es sieht so aus, dass dies nur funktioniert, wenn Sie die Funktion vor dem Laden des Videos hinzufügen. Gibt es eine allgemeine Möglichkeit, diese Werte für ein Video zu erhalten, das bereits abgespielt wird? –

+1

Bummer. Trotzdem danke. –

+0

Was hält Sie davon ab, es vor Ihrem Video hinzuzufügen? Es sitzt nur da und lauscht auf das Ereignis loadedmetadata. – Neil

0

habe gerade herausgefunden, dass wir die Videobreite und Höhe erhalten können:

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

Diese beiden Funktionen ausgesetzt sind, von jQuery.

Ein weiterer Grund, warum jQuery rockt !!!

+1

Ähm, nach [the docs] (https://api.jquery.com/innerwidth/) wird 'innerWidth()' '' Die aktuelle berechnete innere Breite (einschließlich Padding aber nicht Rahmen) '. Zugegeben, die meisten Videos verwenden kein Padding, aber Sie können genauso gut die Abmessungen des Videoelements mit 'video.width' und' video.height' ermitteln. Das würde den wahren Wert ergeben (d. H. Keine Auffüllung), ist einfacher und verwendet jQuery nicht. Es ist jedoch wichtig, zwischen den Dimensionen des Videoelements und den nativen Dimensionen des Videos zu unterscheiden. Was diese und die obige Antwort sind, sind völlig verschieden. – Nateowami

Verwandte Themen