jQuery에서 종횡비를 유지하지 않고 html5 비디오 늘이기

Question

HTML5 비디오는 고유 한 종횡비를 가지며 CSS에서 수행하는 내용과 상관없이 유지합니다.

저는 16 : 9가 아닌 반응 형 비디오 컨테이너가 있습니다. 원래의 종횡비가 깨지더라도 그 내부의 비디오를 100 % 너비와 100 % 높이로 늘리고 싶습니다.

내 문제를 해결할 수있는 CSS object-fit : fill 속성에 대해 읽었지만 최신 브라우저에서 지원하려면 아직 멀었습니다. 그래서 나는 내가 필요한 것을 얻기 위해 자바 스크립트를 사용해야한다고 생각합니다.

나는이 바이올린 건너 온 :

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 속성을 읽을 수 없다고 알려줍니다.

미리 도움 주셔서 감사합니다. <video> 태그에 대한 HTML5 스펙에서

는

Answer 1

인용구 :

비디오 내용이 요소의 재생 영역의 내부 렌더링되어야한다 비디오 콘텐츠는 맞는 가능한 가장 큰 크기로 재생 영역의 중앙에 표시되도록 그 안에는 동영상 콘텐츠의 가로 세로 비율 인 이 그대로 유지됩니다. 따라서 재생 영역 비율 의 비율이 비디오의 종횡비와 일치하지 않으면 비디오가 레터 박스 또는 필러 박스로 표시됩니다. 의 영역은 비디오가 포함되지 않은 요소의 재생 영역으로 을 나타냅니다.

특히 videoWidth는 supported by all major browsers 인 것으로 보이므로 어떤 문제가 있는지 잘 모르겠습니다.

내가 가장 잘 아는 한, 연결 한 jsfiddle에 표시된 CSS 변환은 <video>의 경우 효과가 표준화되지 않았지만 모두 IE10 및 최신 Chrome 및 Firefox에서 작동했습니다. 그러나 크롬이 아닌 브라우저에서 jsfiddle를 사용하려고하면 궁금합니다. 당신이 제공 한 스크립트는 단지 웹킷 변환을 추가하기 때문에 다른 렌더러에서 변환하도록 수정했으며 효과를보다 분명하게 보이도록 비율을 증가 시켰습니다.

this new one을 살펴보십시오. 잘하면 그것이 당신이 원하는 것입니다. 또한 here is a pure CSS one으로 자바 스크립트는 실제로 어떤 이유로 든 새 비율을 계산해야하고 정적으로 설정할 수 없다면 변경 사항을 적용하지 않아도됩니다. 유일한 문제는 컨트롤이 보이지 않게되어 자동 재생 속성이 추가 된 것입니다.