масштабировать HTML5 видео и изменить соотношение сторон, чтобы заполнить весь сайт - PullRequest
Новая
       7

масштабировать HTML5 видео и изменить соотношение сторон, чтобы заполнить весь сайт

18 голосов
/ 23 октября 2010

Я хочу использовать видео 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;
}

Ответы [ 9 ]

50 голосов
/ 05 марта 2015

это действительно старая ветка, я знаю, и то, что я предлагаю, это не обязательно решение, которое вы ищете, но для всех людей, которые попадают сюда из-за поиска в том, что я искал: масштабируйте видео, чтобы заполнитьэлемент видео контейнера, сохраняя соотношение в неизменном виде

Если вы хотите, чтобы видео занимало размер элемента <video>, но видео масштабируется правильно, чтобы заполнить контейнер, сохраняя соотношение сторон в такте.можно сделать это с помощью CSS, используя object-fit.Как и background-size для фоновых изображений, вы можете использовать следующее: 

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

Я надеюсь, что это может помочь некоторым людям.

РЕДАКТИРОВАТЬ: работает в большинстве браузеров, ноIE

14 голосов
/ 09 января 2014


вы можете использовать: 

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

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

10 голосов
/ 23 октября 2010

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

[...] так же, как элемент img - если вы задаете только одно из значений ширины и высоты, другое измерение автоматически корректируется соответствующим образом, чтобы видеосохраняет свое соотношение сторон.Однако - в отличие от элемента img - , если установить ширину и высоту для чего-либо, что не соответствует соотношению сторон видео, видео не растягивается, чтобы заполнить поле. Вместо этого видео сохраняет правильные значениясоотношение сторон и почтовый ящик внутри элемента видео. Видео будет отображаться как можно большего размера внутри видеоэлемента, сохраняя соотношение сторон.

8 голосов
/ 15 сентября 2011

Я работаю над этим в javascript, сравнивая соотношение, установленное для элемента, с исходным видео, а затем применяя CSS-преобразование: https://gist.github.com/1219207

6 голосов
/ 01 ноября 2012

Поднял это вчера и боролся за ответ.Это несколько похоже на предложение Джима Джефферса, но оно работает для масштабирования по 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% внутри оболочки, чтобы избежать проблем в некоторых угловых случаях, с которыми я столкнулся.

4 голосов
/ 03 декабря 2016

Что сработало для меня это 

video {
object-fit: fill;
}
1 голос
/ 26 марта 2015

Я использую это, чтобы заполнить либо ширину, либо высоту ... (требуется 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%, а ваш контейнерный элемент имеет css overflow:hidden, просто передайте ему тег видео. 

var vid = document.getElementsByTagName("video")[0];
fillVideo(vid);
0 голосов
/ 15 октября 2016

После некоторой борьбы с этим я и закончил.Он автоматически масштабирует видео в нужный момент. 

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 голосов
/ 15 июля 2015

Правильный вариант 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;
}

Для видео в контексте ОП это будет: 

video#vidtest {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...