css - HTML5 ビデオをスケーリングし、アスペクト比を壊してサイト全体を埋めます

Question

サイトの背景に 4:3 の動画を使用したいと考えています。ただし、幅と高さを 100% に設定すると、縦横比がそのまま維持されるため機能せず、ビデオがサイトの幅全体を埋めません。

これが私のHTMLとCSSコードです。

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;
}

score 103 · Accepted Answer

これは非常に古いスレッドです。私が提案しているのは、必ずしもあなたが探している解決策ではありませんが、私が検索したものを検索したためにここにたどり着いたすべての人々のために:ビデオコンテナ要素を満たすようにビデオをスケーリングし、比そのまま

動画を要素のサイズいっぱいに表示したいが<video>、縦横比を維持したままコンテナーに合わせて動画を正しくスケーリングする場合は、.css を使用してこれを行うことができますobject-fit。背景画像の場合と同様background-sizeに、次を使用できます。

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

これが一部の人々の助けになることを願っています。

編集:ほとんどのブラウザーで動作しますが、IE

score 14 · Accepted Answer

あなたが使用することができます:

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

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

score 10 · Accepted Answer

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

[...] img 要素と同じ方法 — 幅と高さの一方のみを設定すると、ビデオの縦横比が維持されるように他方の寸法が自動的に適切に調整されます。ただし、img 要素とは異なり、幅と高さをビデオの縦横比と一致しない値に設定すると、ビデオはボックスを埋めるために引き伸ばされません。代わりに、ビデオは正しい縦横比を保持し、ビデオ要素内でレターボックス化されます。ビデオは、縦横比を維持しながら、ビデオ要素内で可能な限り大きくレンダリングされます。

score 8 · Accepted Answer

8

私のために働いたのは

video {
object-fit: fill;
}

于 2016-12-03T17:53:10.580 に答える

score 8 · Accepted Answer

昨日これを拾い、答えを求めて格闘してきました。これは Jim Jeffers の提案に多少似ていますが、x と y のスケーリングで機能し、javascript 構文であり、jQuery のみに依存しています。それはかなりうまくいくようです：

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  + ')')
    }
}

このフィドルでわかるように、ネイティブコントロールを使用している場合、いくつかの問題が発生します: http://jsfiddle.net/MxxAv/

現在のプロジェクトにはすべての抽象化レイヤーがあるため、いくつかの特殊な要件があります。そのため、この例ではラッパー div を使用し、ラッパー内でビデオを 100% にスケーリングして、私が遭遇したいくつかのコーナーケースでの問題を回避しています。

score 1 · Accepted Answer

これを使用して、幅または高さを埋めます... (jQuery が必要です) これは縦横比を保持し、div を埋めます。問題はアスペクト比を壊すことだったことは知っていますが、それは必須ではありません。

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  + ')');
};

<video>幅と高さが設定されてい100%て、コンテナ div に cssがある限りoverflow:hidden、video タグを渡すだけです。

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

score 0 · Accepted Answer

これに対する正しい CSS オプションは次のとおりです。object-fit: contain;

次の例では、画面の幅全体に背景画像を引き伸ばし (アスペクト比を壊しながら)、一定の固定高さを維持します。

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

OP のコンテキスト内のビデオの場合、次のようになります。

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

score 0 · Accepted Answer

悪戦苦闘の末、たどり着いたのがこれです。適切なタイミングでビデオを自動的にスケーリングします。

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", "");
    }
});

$(document).ready()そのコードをブロックに入れるだけです。

Chrome 53 、Firefox 49、Safari 9、IE 11 でテスト済み (IE はビデオを正しくスケーリングしますが、その周りで他のおかしな動作をする可能性があります)。

css - HTML5 ビデオをスケーリングし、アスペクト比を壊してサイト全体を埋めます

9 に答える 9

Related

Reference