web-dev-qa-db-ja.com

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

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;
}
csshtml5html5-video
19
Roland

これは本当に古いスレッドであり、私が提案しているのは必ずしもあなたが探している解決策ではありませんが、私が検索したものを検索するためにここに着くすべての人々のために：scale theビデオコンテナ要素を満たすためのビデオ、比率はそのまま

ビデオを<video>要素のサイズに合わせたいが、アスペクト比をそのままにしながらコンテナに合わせてビデオを正しくスケーリングする場合、object-fitを使用してCSSでこれを行うことができます。背景画像のbackground-sizeと同様に、次を使用できます。

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

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

編集： IE以外のほとんどのブラウザで動作します

53
Mathias


次を使用できます。

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

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

14
Ouadie

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

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

10
drudge

要素に設定された比率をソースビデオと比較し、CSS変換を適用することにより、javascriptでこれを回避します。 https://Gist.github.com/1219207

8
Jim Jeffers

昨日これを拾い上げて、答えを求めて取り組んでいます。これは、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％にスケーリングして、発生したいくつかのコーナーケースでの問題を防ぎます。

6
Shane

私のために働いたのは

video {
object-fit: fill;
}
4
JAck

幅OR height ...（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がある場合、ビデオタグを渡すだけです。

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

いくつか苦労した後、これは私が終わったものです。適切なタイミングでビデオを自動的にスケーリングします。

_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はビデオを正しくスケーリングしますが、他の面白いことを行うかもしれません）。

0
jox

このための正しい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;
}
0
user2121874