webentwicklung-frage-antwort-db.com.de

hTML5-Video skalieren und Seitenverhältnis aufteilen, um die gesamte Site zu füllen

Ich möchte ein 4: 3-Video als Hintergrund für eine Website verwenden. Die Einstellung der Breite und Höhe auf 100% Funktioniert jedoch nicht, da das Seitenverhältnis erhalten bleibt, sodass das Video nicht die gesamte Breite der Website ausfüllt .

danke für Ihre Hilfe!

hier ist mein HTML- und CSS-Code

html:

<!DOCTYPE HTML>
<html land="en">

<head>

<link rel="stylesheet" type="text/css" href="html5video.css" />


<title>html 5 video test</title>


</head>

<body id="index">

<video id="vidtest" autoplay>
<source src="data/comp.ogv" type="video/ogg" width="auto" >
</video>

<div class="cv">

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

</div>


</body>
</html>

css:

body
{
background-color:#000000;
}



#vidtest {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 200%;
height: 100%;
z-index: -1000;
}

.cv
{
width: 800px;
position:relative;
text-align:center;
margin-top: 100px;
color:#FFFFFF;
font-family:"Arial";
font-size: 10px;
line-height: 2em;
text-shadow: 3px 3px 2px #383838;
margin-left: auto;
margin-right: auto;
}
17
Roland

dies ist ein wirklich alter Thread, ich weiß, und was ich vorschlage, ist nicht unbedingt die Lösung, die Sie suchen, sondern für alle Menschen, die hier landen, weil ich nach dem gesucht habe, was ich gesucht habe: skalieren Sie das Video, um das Video-Containerelement zu füllen , das Verhältnis intakt halten 

Wenn Sie möchten, dass das Video die Größe des Elements <video> ausfüllt, das Video jedoch korrekt skaliert wird, um den Container zu füllen, während das Seitenverhältnis beibehalten wird, können Sie dies mit CSS mit object-fit tun. Ähnlich wie background-size für Hintergrundbilder können Sie Folgendes verwenden:

video {
    width: 230px;
    height: 300px;
    object-fit: cover;
}

Ich hoffe, das kann einigen Menschen helfen.

BEARBEITEN: funktioniert in den meisten Browsern, aber IE

45
Mathias


sie können verwenden:

min-width: 100%;
min-height: 100%;

http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-und-responsive-videos

14
Ouadie

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-und-audio/

[...] auf dieselbe Weise wie das img-Element: Wenn Sie nur Breite und Höhe festlegen, wird die andere Bemaßung automatisch entsprechend angepasst, sodass das Video sein Seitenverhältnis beibehält. Im Gegensatz zum Element img - , wenn Sie width und height auf etwas setzen, das nicht dem Seitenverhältnis des Videos entspricht, wird das Video nicht gestreckt, um die Box zu füllen. Stattdessen behält das Video das korrekte Seitenverhältnis bei und befindet sich innerhalb des Videoelements. Das Video wird im Videoelement so groß wie möglich dargestellt, wobei das Seitenverhältnis beibehalten wird.

9
drudge

Um dieses Problem in Javascript zu umgehen, vergleiche ich das Verhältnis des Elements zum Quellvideo und wende dann eine CSS-Transformation an: https://Gist.github.com/1219207

7
Jim Jeffers

Habe dies gestern abgeholt und habe für eine Antwort gerungen. Dies ist in gewisser Weise dem Vorschlag von Jim Jeffers ähnlich, funktioniert aber für die Skalierung von x und y, ist in der JavaScript-Syntax und basiert nur auf jQuery. Es scheint ziemlich gut zu funktionieren:

function scaleToFill(videoTag) {
    var $video = $(videoTag),
        videoRatio = videoTag.videoWidth / videoTag.videoHeight,
        tagRatio = $video.width() / $video.height();
    if (videoRatio < tagRatio) {
        $video.css('-webkit-transform','scaleX(' + tagRatio / videoRatio  + ')')
    } else if (tagRatio < videoRatio) {
        $video.css('-webkit-transform','scaleY(' + videoRatio / tagRatio  + ')')
    }
}

Sie werden auf einige Probleme stoßen, wenn Sie die systemeigenen Steuerelemente verwenden, wie Sie in dieser Geige sehen können: http://jsfiddle.net/MxxAv/

Ich habe einige ungewöhnliche Anforderungen wegen all der Abstraktionsschichten in meinem aktuellen Projekt. Aus diesem Grund verwende ich im Beispiel ein Wrapper-div und skaliere das Video innerhalb des Wrappers auf 100%, um Probleme in einigen der von mir angetroffenen Fälle zu vermeiden.

6
Shane

Was für mich funktioniert hat, ist 

video {
object-fit: fill;
}
3
JAck

Ich benutze dies, um entweder width OR height zu füllen ... (erfordert jQuery) Dieses KEEPS hält das Seitenverhältnis und füllt das div. Ich weiß, die Frage war, das Aspektverhältnis zu brechen, aber es ist nicht notwendig. 

var fillVideo = function(vid){
    var video = $(vid);
    var actualRatio = vid.videoWidth/vid.videoHeight;
    var targetRatio = video.width()/video.height();
    var adjustmentRatio = targetRatio/actualRatio;
    var scale = actualRatio < targetRatio ? targetRatio / actualRatio : actualRatio / targetRatio;
    video.css('-webkit-transform','scale(' + scale  + ')');
};

solange für <video> Breite und Höhe auf 100% gesetzt sind und Ihr Container div css overflow:hidden hat, übergeben Sie einfach das Video-Tag.

var vid = document.getElementsByTagName("video")[0];
fillVideo(vid);
1
Mulhoon

Nach einigen Schwierigkeiten kämpfte ich damit. Das Video wird im richtigen Moment automatisch skaliert.

var videoTag = $('video').get(0);
videoTag.addEventListener("loadedmetadata", function(event) {
   videoRatio = videoTag.videoWidth / videoTag.videoHeight;
   targetRatio = $(videoTag).width() / $(videoTag).height();
    if (videoRatio < targetRatio) {
      $(videoTag).css("transform", "scaleX(" + (targetRatio / videoRatio) + ")");
    } else if (targetRatio < videoRatio) {
      $(videoTag).css("transform", "scaleY(" + (videoRatio / targetRatio) + ")");
    } else {
      $(videoTag).css("transform", "");
    }
});

Fügen Sie diesen Code einfach in einen $(document).ready()-Block ein.

Getestet auf Chrome 53, Firefox 49, Safari 9, IE 11 (IE skaliert das Video richtig, macht aber vielleicht noch andere lustige Sachen).

0
jox

Die richtige CSS-Option dafür ist object-fit: contain;

Im folgenden Beispiel wird ein Hintergrundbild über die Breite des Bildschirms gedehnt (während das Seitenverhältnis gebrochen wird) und eine konstante feste Höhe beibehalten.

body {
    background-image:url(/path/to/background.png)
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 346px;
    object-fit: contain;
}

Für ein Video im Kontext des OP wäre das dann:

video#vidtest {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
0
user2121874