자바 스크립트를 사용하는 비디오 효과

Question

this 페이지에 표시된 비디오 효과를 얻는 방법을 알려주십시오. 그것은 너비가 100 %이며, 반응 형이며 자바 스크립트를 사용합니다.

훌륭한 코드 샘플이있는 경우

Answer 1

사이트에서 HTML5 비디오 태그를 사용 중입니다.

<video loop="loop" poster="/video/features/main.jpg" style="width: 1263px; height: 711px; top: -186.5px; left: 0px;"> 
    <source src="/video/features/main.webm" type="video/webm"> 
    <source src="/video/features/main.mp4" type="video/mp4"> 
</video> 

태그, HTML5 호환 브라우저에서 분명히에만 사용할 수는 비디오 파일을 재생할 수 있습니다 : 여기에 구글 크롬에 의해 렌더링 소스가 있습니다. 이것이 바로이 경우에 해당되는 작업입니다.

첫 번째 소스는 기본 비디오 소스이며 첫 번째 비디오 포맷이 지원되지 않는 경우 MP4가 대체입니다. loop 속성을 사용하면 재생중인 비디오에 루프를 설정할 수 있으며 포스터는 사용자가 재생하거나 검색 할 때까지 표시 할 이미지입니다.

MDN page을 살펴보십시오.

Answer 2

여기의 BKWLD dev. 우리는 바깥 쪽 div를 overflow: hidden으로 설정 한 다음 16 : 9 종횡비를 기반으로 JavaScript를 사용하여 비디오 태그의 크기를 조정하고 위치를 조정합니다.
(https://gist.github.com/danro/5408291)

// Depends on jQuery 
// Assumes outerDiv and videoTag are jQuery objects 

var width = outerDiv.width(); 
var height = outerDiv.height(); 
var aspectW = 16; 
var aspectH = 9; 
var scaleX = width/aspectW; 
var scaleY = height/aspectH; 
var scale = Math.max(scaleX, scaleY); 
var w = Math.ceil(aspectW * scale); 
var h = Math.ceil(aspectH * scale); 
var x = 0; 
var y = 0; 
if (w > width) x = -(w-width)*0.5; 
if (h > height) y = -(h-height)*0.5; 

videoTag.css({ 
    width: w, 
    height: h, 
    top: y, 
    left: x 
}); 

:

여기에 각각의 창 크기 조정 이벤트에 무슨 일이 일어나고 있는지의 간단한 예입니다