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

Question

Я экспериментировал с воспроизведением видео в формате HTML5. Например, у меня на странице есть этот видеообъект:

<video width="480" height="380" class="ecard" tabindex="0">
   <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="videos/1156 In your honor we'll be dancing.ogv"></source>
   <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="videos/1156 In your honor we'll be dancing.mp4"></source>
</video>

Моя проблема в том, что элемент видео сохраняет свое соотношение сторон, в то время как я предпочел бы заставить воспроизведение соответствовать кадру. Кто-нибудь знает способ сделать это?

Answer 1

В настоящее время нет способа сделать это, но со свойством CCS3 image-fit это станет возможным Ни один браузер пока не поддерживает его. Затем вы можете использовать это, чтобы растянуть все видео на ширину / высоту:

video {
  image-fit: fill;
}

См. Спецификации в http://dev.w3.org/csswg/css3-page/#propdef-image-fit

Answer 2

Немного поздно, но CSS3-объектное свойство удовлетворит эту потребность. http://dev.w3.org/csswg/css3-images/#object-fit Это уже реализовано в Opera, см. http://my.opera.com/desktopteam/blog/2010/08/03/presto-update.

Answer 3

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

video
{
  object-fit: cover;
  height: 100%;
  width: 100%;
}

Answer 4

Вы также можете сделать это: поместите видеоэлемент в центр с left и top, равным 50%, затем переведите его обратно с transform: translate(-50%, -50%);, наконец, установите для min-height и min-width из 100 %

video {
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

Answer 5

Я попытался подобрать изображение, но не получилось.

затем, проверяя приведенные выше ответы, я использую подгонку объекта в CSS:

video {
  object-fit: fill;
}

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

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

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

Размер заменяемого содержимого заполняет поле содержимого элемента: размер конкретного объекта объекта соответствует ширине и высоте элемента.

Answer 6

Да, я думаю, что есть хотя бы один из способов сделать это, но это довольно уродливо: Масштабируйте элемент видео с помощью CSS Transforms (или, возможно, SVG). Проблема в том, что я думаю, что вам понадобится какой-нибудь Javascript для вычисления подходящего масштабного коэффициента на основе размера контейнера.

Хорошей новостью будет то, что WebKit и Gecko уже давно поддерживают CSS Transforms, а также Opera 10.50. И все они поддерживают SVG.

http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transforms https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms