Масштаб HTML5 Видео и разбить соотношение сторон для заполнения всего сайта

Ответ 1

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

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

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

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

EDIT: не во всех браузерах.

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

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

video {
object-fit: fill;
}

Ответ 7

Я использую это для заполнения ширины или высоты... (требуется jQuery) Это KEEPS соотношение сторон и заполняет 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);

Ответ 8

Правильный вариант CSS для этого - object-fit: contain;

Следующий пример растянет фоновое изображение по ширине экрана (в то время как BREAKING соотношение сторон) и поддерживает постоянную фиксированную высоту.

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;
}

Ответ 9

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

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 действительно масштабирует видео правильно, но может делать другие забавные вещи вокруг него).