반응 형 HTML5 비디오 + 캔버스

Question

다음 기능을 사용하여 크기를 조절하고 번역하고 브라우저 창 크기를 조정합니다. 그러나 미디어 플레이어가 창 크기 조정을 처리하는 것처럼 창 크기가 변경되면 가로 세로 비율을 저장하려고합니다 (이제 비디오의 일부분이 잘립니다).

/** 
* This function is called when 'resize' event occur, it simply changes the way 
* <canvas> and <video> are displayed by browser using few CSS3 techniques. 
* @return none 
*/ 
    function resize() { 

     var w = 0; 
     var h = 0; 

     if (!window.innerWidth) { 
      if (!(document.documentElement.clientWidth == 0)) { 
       w = document.documentElement.clientWidth; 
       h = document.documentElement.clientHeight; 
      } else { 
       w = document.body.clientWidth; 
       h = document.body.clientHeight; 
      } 
     } else { 
      w = window.innerWidth; 
      h = window.innerHeight; 
     } 

     var cw = w; 
     var ch = h; 

     var aspect = videoWidth/videoHeight; 

     if (w/h > aspect) { 
      ch = cw/aspect; 
     } else { 
      cw = ch * aspect; 
     } 

     scalew = cw/videoWidth; 
     scaleh = ch/videoHeight; 

     dx = Math.round((w - cw)/2); 
     dy = Math.round((h - ch)/2); 

     var translateXForm = "translate(" + dx + "px," + dy + "px)"; 
     var scaleXForm = "scale(" + scalew + "," + scaleh + ")"; 
     var transform = translateXForm + " " + scaleXForm; 
     var style = 
     "-webkit-transform:" + transform + ";" + 
     "-moz-transform:" + transform + ";" + 
     "-ms-transform:" + transform + ";" + 
     "-o-transform:" + transform + ";" + 
     "transform:" + transform; 

     canvas.setAttribute("style", style); 
     video.setAttribute("style", style); 

    } 

Answer 1

JavaScript로 처리하는 것은 필요하지 않습니다. 순수 CSS를 사용하여이 작업을 수행 할 수 있습니다!

는 간단히 비디오 태그에 다음과 같은 스타일을 설정합니다

video { 
    height: auto; 
    width: 100%; 
} 

이 당신의 화면 비율을 유지합니다 창을

DEMO