响应式HTML5视频+画布

我使用以下函数进行缩放和翻译，并调整浏览器窗口的大小。但是，当窗口大小改变时，我想要保存宽高比（现在部分视频被切断），就像媒体播放器处理窗口大小调整一样。响应式HTML5视频+画布

/** 
* 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); 

    }

来源

2013-04-26 vitozev

用JavaScript来做并不是必要的，我们可以用纯CSS实现这个！

只需设置下列样式的视频标签：

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

这将让你的宽高比当调整窗口大小

DEMO

来源

2013-04-26 13:05:05 Andy

谢谢！它工作正常

响应式HTML5视频+画布

回答

相关问题