HTML5 Video Passbreite ODER Höhe

Question

Die width=100% height="auto" skaliert meine Videos auf die gesamte Breite des Browserfensters, aber wenn die Höhe des Fensters niedriger als das Seitenverhältnis ist, wird das Video in der Höhe abgeschnitten.

Ich möchte das Video so skalieren, dass es entweder in Breite oder Höhe passt, so dass ich immer das ganze Video ohne Zuschneiden sehen kann, wobei das nächste Verhältnis (Leerraum bei niedrigerem Fensterverhältnis) hinzugefügt wird.

Ich kann nicht herausfinden, wie dies jedoch zu tun ist.
Zuerst scheint irgendein Höhenwert,% oder px, ignoriert zu werden, ich kann die Größe überhaupt nicht unter Verwendung der Höhe, nur Breite einstellen. Gleiches für minimale Breite/Höhe.

Wie kann das gemacht werden?

Mein Code:

<video id="video" width=100% height="auto" onclick=playPause()></video> 

Video von Javascript geladen wird, wobei v eine Videoverbindung aus einem Array ist:

video.addEventListener('play', function() { v.play();}, false); 

Answer 1

es gelöst mich mit einer JavaScript-Funktion:

window.addEventListener('resize', resize, false); 

video.height = 100; /* to get an initial width to work with*/ 
resize(); 

function resize() { 
videoRatio = video.height/video.width; 
windowRatio = window.innerHeight/window.innerWidth; /* browser size */ 

    if (windowRatio < videoRatio) { 
     if (window.innerHeight > 50) { /* smallest video height */ 
       video.height = window.innerHeight; 
     } else { 
      video.height = 50; 
    } 
    } else { 
     video.width = window.innerWidth; 
    } 

}; 

Answer 2

versuchen, den Wert innerhalb Einwickeln

<div class="videoContainer"> 
    <video id="video" width="100%" height="auto" onclick="playPause();"></video> 
</div> 

zitiert Sie kann diese Klasse

hinzufügen

.videoContainer 
{ 
    position:absolute; 
    height:100%; 
    width:100%; 
    overflow: hidden; 
} 

.videoContainer video 
{ 
    min-width: 100%; 
    min-height: 100%; 
} 

Oder alternativ diese

video { 
    object-fit: cover; 
} 

Answer 3

verwenden Es gibt eine große Auto-Breite/Höhe Trick intrinsic ratios genannt, die auf die Bilder/Videos und ähnliches verwendet werden kann! Der Trick besteht darin, Ihr gewünschtes Element in einem Wrapper zu haben, der dann eine Auffüllung in Prozent auf ihn angewendet hat.

Ihr Markup wäre dann:

<div class="video-wrapper"> 
    <video class="video" id="video" onclick=playPause()></video> 
</div> 

Und Ihre CSS:

.video-wrapper { 
    position: relative; 
    padding-bottom: 20%; 
    height: 0; 
} 

.video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #ccc; /* Random BG colour for unloaded video elements */ 
} 

Sie können mit min-width oder max-width der .video-wrapper Arten von Spielen die Abmessungen Ihres Video-Container begrenzen.

Hoffe, das hilft!

Answer 4

Ich hatte ein ähnliches Problem. Ich habe eine "Diashow" mit verschiedenen Objekten als Dias gemacht, einige davon sind Videos in verschiedenen Größen. Ich habe keine konzeptionelle Lösung gefunden, also habe ich einen Trick gefunden.

Ich habe angegeben explizit alle reellen Videogrößen in Tags und gesammelt, um die Informationen über alle von ihnen:

var vids = document.getElementsByClassName("vid"); // videos 
var vidl = vids.length; 
var vidH = [ ]; 
var vidW = [ ]; 

// Get original widths and heights of videos 
for (i=0; i<vidl; i++) { // > 
    vidH.push(vids[i].height); 
    vidW.push(vids[i].width); 
} 

dann (wenn nötig) ich die Fenstergröße wie folgt definieren:

// Current inner height of the browser window (in pixels) 

var iH = window.innerHeight 
     || document.documentElement.clientHeight 
     || document.body.clientHeight; 
// Current inner width of the browser window (in pixels) 
var iW = window.innerWidth 
     || document.documentElement.clientWidth 
     || document.body.clientWidth; 

Um ein Rechteck in ein anderes Rechteck zu skalieren, müssen wir eine minimale Skalierung finden:

Leider erschien hier etwas mehr Platz; In FireFox habe ich seinen minimalen Wert als 5 gefunden, dass ich den Fensterhöhenwert (iH) als neue Videogröße negiere.