Javascript - 如何在不按高度切割图片的情况下将视频屏幕固定为拉伸(stretch)宽度和高度

Question

这是不正确的，我正在尝试将视频屏幕完全设置为 100% 宽度和 100% 高度。但是在更大的分辨率下它不能正确显示高度(离开 View )。

The following aspect ration is working but the problem is it makes wrong (black on left and right):

window.onresize = function(){
  var aspectRatio;
  if (remoteVideo.style.opacity === '1') {
    aspectRatio = remoteVideo.videoWidth/remoteVideo.videoHeight;
  } else if (localVideo.style.opacity === '1') {
    aspectRatio = localVideo.videoWidth/localVideo.videoHeight;
  } else {
    return;
  }

  var innerHeight = this.innerHeight;
  var innerWidth = this.innerWidth;
  var videoWidth = innerWidth < aspectRatio * window.innerHeight ?
                   innerWidth : aspectRatio * window.innerHeight;
  var videoHeight = innerHeight < window.innerWidth / aspectRatio ?
                    innerHeight : window.innerWidth / aspectRatio;
  containerDiv = document.getElementById('container');
  containerDiv.style.width = videoWidth + 'px';
  containerDiv.style.height = videoHeight + 'px';
  containerDiv.style.left = (innerWidth - videoWidth) / 2 + 'px';
  containerDiv.style.top = (innerHeight - videoHeight) / 2 + 'px';
};

Tried to modify this but still when the width increase then the height get cut off also while using webkitRequestFullScreen(); the whole width and height is broken, its not doing accurate.

window.onresize = function(){
  var aspectRatio;
  if (remoteVideo.style.opacity === '1') {
    aspectRatio = remoteVideo.videoWidth/remoteVideo.videoHeight;
  } else if (localVideo.style.opacity === '1') {
    aspectRatio = localVideo.videoWidth/localVideo.videoHeight;
  } else {
    return;
  }

  var innerHeight = this.innerHeight;
  var innerWidth = this.innerWidth;
  var videoWidth = innerWidth < aspectRatio * window.innerHeight ?
                   innerWidth : aspectRatio * window.innerHeight;
  var videoHeight = innerHeight < window.innerWidth / aspectRatio ?
                    innerHeight : window.innerWidth / aspectRatio;
  containerDiv = document.getElementById('container');
  //containerDiv.style.width = videoWidth + 'px';
  containerDiv.style.width = window.innerWidth + 'px';
  containerDiv.style.height = videoHeight + 'px';
  //containerDiv.style.left = (innerWidth - videoWidth) / 2 + 'px';
  //containerDiv.style.top = (innerHeight - videoHeight) / 2 + 'px';
};

预期输出(调整大小、最大化或全屏):

任何人都可以提出建议，我完全迷路了，无法做出准确的预期输出。

编辑: http://jsfiddle.net/2m8ay/

Answer 1

你可以为此尝试 css:

video { 
       width:305px; 
       height:160px;  
       background:blue; 
    }

如果视频海报包含图像，则

video { 
   width:305px; 
   height:160px;  
   background:transparent url('poster.jpg') no-repeat 0 0; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
}

但是，这仅在您的视频数量非常固定时才有用。否则，您将需要执行内联 css 以在那里重置背景图像。

更新您的解决方案:http://jsfiddle.net/2m8ay/1/