Как я могу сделать соответствие воспроизведения видео HTML 5 для структурирования вместо того, чтобы поддержать соотношение сторон?
Я экспериментировал с воспроизведением видео HTML5. Например, у меня есть этот видео объект, встроенный на моей странице:
<video width="480" height="380" class="ecard" tabindex="0">
<source type="video/ogg; codecs="theora, vorbis"" src="videos/1156 In your honor we'll be dancing.ogv"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="videos/1156 In your honor we'll be dancing.mp4"></source>
</video>
Моей проблемой является видео элемент, сохраняет, это - соотношение сторон, тогда как я предпочел бы вынуждать воспроизведение соответствовать к кадру. Кто-либо знает способ сделать это?
2 ответа
В настоящее время это невозможно сделать, но со свойством соответствия изображения CCS3 это станет возможным. Однако пока ни один браузер не поддерживает его. Затем вы можете использовать это, чтобы растянуть все видео до ширины / высоты:
video {
image-fit: fill;
}
См. Спецификацию на http://dev.w3.org/csswg/css3-page/#propdef-image-fit
Да, я действительно думаю, что есть по крайней мере один способ сделать это, но он довольно уродлив: Масштабировать элемент видео с помощью 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