Stretch html5 видео без сохранения пропорций в jQuery

Question

Видео HTML5 имеют внутренние пропорции и, как правило, сохраняют его, независимо от того, что ваш CSS говорит им делать.

У меня есть чувствительный видеоконтейнер, который не является 16: 9, и я хотел бы, чтобы видеоролики внутри него растягивались до 100% ширины и 100% высоты, даже если он нарушает их исходное соотношение сторон.

Я читал о свойствах объекта CSS-fit: fill, которые могли бы решить мою проблему, но до того, как современные браузеры его поддерживают, еще предстоит пройти долгий путь. Поэтому, я думаю, я должен обратиться к Javascript для достижения того, что мне нужно.

Я наткнулся на эту скрипку:

http://jsfiddle.net/MxxAv/

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 + ')') 
} 
} 

$(function() { 
$("#testVideo").click(function(evt) { 
    scaleToFill(document.getElementsByTagName("video")[0]); 
}); 
}); 

Однако, я не могу показаться, чтобы получить этот код, чтобы работать. Консоль сообщает мне, что свойство videoWidth не может быть прочитано.

Заранее благодарим за вашу помощь!

Answer 1

Цитата из спецификации HTML5 для <video> тегов:

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

Что касается videoWidth, то это, по-видимому, supported by all major browsers, поэтому я не уверен, в чем проблема.

Насколько я знаю, CSS-преобразования, как показано в jsfiddle, которые вы связали, не стандартизированы с точки зрения их эффекта, когда дело доходит до <video>, но все они работали на меня в IE10, а также на последние версии Chrome и Firefox. Интересно, однако, если вы попытались использовать jsfiddle в браузере, который не был Chrome. Сценарий, который вы предоставили, добавляет только преобразования webkit, поэтому я изменил его, чтобы сделать преобразования на других рендерерах и увеличил коэффициент, чтобы сделать эффект более очевидным.

Посмотрите на this new one. Надеюсь, это то, что вы хотели. Кроме того, here is a pure CSS one, поскольку javascript действительно не требуется вносить эти изменения, если вам не нужно рассчитывать новое соотношение по какой-либо причине и не может быть статическим. Единственная проблема заключается в том, что элементы управления исчезают из виду, поэтому я добавил атрибут автовоспроизведения.