HTML 5 Видео растяжка

Можете ли вы сделать видео "растянуть" на ширину и высоту видеоэлемента? По-видимому, по умолчанию видео масштабируется и устанавливается внутри видеоэлемента пропорционально.

спасибо

Ответ 1

Я тестировал с помощью объектной привязки: заполните CSS

Хорошо работает.

video {
  object-fit: fill;
}

Из MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):

Объектно-ориентированное свойство CSS указывает, как содержимое замененного элемента должно быть установлено в поле, установленное его используемой высотой и шириной.

Значение: заполнить

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

Ответ 2

Из спецификация для <video>:

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

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

Вы можете добиться растянутого эффекта, используя CSS 3 преобразует, хотя они пока не полностью стандартизированы или реализованы во всех браузерах, а те, в котором он реализован, вам необходимо использовать префикс поставщика, например -webkit- или -moz-. Вот пример:

<!DOCTYPE html>
<style>
video { 
  -webkit-transform: scaleX(2); 
  -moz-transform: scaleX(2);
}
</style>
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video>

Ответ 3

Это отлично сработало для меня

http://coding.vdhdesign.co.nz/?p=29

$VideoElement = $(_VideoElement); //Cache Jquery reference of this
var iOriginalVideoHeight =  _VideoElement.videoHeight;
var iCurrentVideoHeight = $VideoElement.height();
var iVideoContainerHeight = $VideoElement.parent().height();
var iCurrentScale = iOriginalVideoHeight/iCurrentVideoHeight;
var iScaleY = (iVideoContainerHeight / iOriginalVideoHeight)*iCurrentScale;


//Important to note: Set the origin to the top left corner (0% 0%), or else the position of the video goes astray
 $VideoElement.css({
    "transform-origin": "0% 0%",
    "transform":"scaleY(" + iScaleY +")",
    "-ms-transform-origin" : "0% 0% ", /* IE 9 */
    "-ms-transform":"scaleY(" + iScaleY +")", /* IE 9 */
    "-moz-transform-origin" : "0% 0%", /* Firefox */
    "-moz-transform":"scaleY(" + iScaleY +")", /* Firefox */
    "-webkit-transform-origin": "0% 0%", /* Safari and Chrome */
    "-webkit-transform":"scaleY(" + iScaleY +")", /* Safari and Chrome */
    "-o-transform-origin":"0% 0%", /* Opera */
    "-o-transform":"scaleY(" + iScaleY +")" /* Opera */
 });

Ответ 4

Существует также свойство CSS, пригодное для объекта, которое, скорее всего, даст вам то, что вам нужно.

Кстати, я думаю, что этот запрос разрешен для Как я могу сделать воспроизведение видео в формате HTML 5 подходящим для рамки вместо того, чтобы поддерживать соотношение сторон?.

Ответ 5

Это не изменит пропорцию вашего видео, но избавится от уродливых "незаполненных" пространств вверху и внизу или по сторонам вашего видео-просмотра, если ваш браузер не поддерживает стиль object-fit:cover.

Скажем, у вас есть просмотрщик на странице, который 500x281 (правильное изменение размера с 1280x720). Но иногда вы можете получить видео, которое не соответствует пропорциям ровно 16: 9, скажем, 1278x720 или 320x176, как в случае с видео Buck Bunny на сайте W3C. Было бы неплохо, если бы видео полностью заполнило контейнер и вам не нужно было создавать новый контейнер для каждого неправильно обработанного видео.

Учитывая фрагмент кода, например:

<style>
#vidcontent {
  width:500;
  height:281;
  border:2px solid #F00;
  object-fit:cover; /* for those who do support it */
}
</style>

<video id="vidcontent" width="500" height="281" autoplay controls loop>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

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

<script type="text/javascript">
  vidContent = document.getElementById('vidcontent');
  vidContent.addEventListener("loadedmetadata", function(e) {
    var newHeight = (vidContent.width/this.videoWidth) * this.videoHeight;
    vidContent.style.height = parseInt(Math.ceil(newHeight)) + "px";
  }, false);
</script>

Мы разделим текущую ширину контейнера на определенную ширину видеопотока, а затем умножим на определенную высоту видеопотока. Это приводит к тому, что высота контейнера должна быть настолько чистой, насколько это возможно.

Важно, чтобы высота и ширина видео были установлены как атрибуты в HTML в дополнение к определению CSS.

Ответ 6

Спасибо, чувак

подгонка объекта: заполнить

работает отлично