html5 video 自动拉伸,HTML 5视频拉伸

从

the spec for ：

Video content should be rendered inside the element’s playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content’s aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed. Areas of the element’s playback area that do not contain the video represent nothing.

没有规定拉伸视频，而不是letterboxing它。这可能是因为拉伸给出了非常糟糕的用户体验，并且大多数时间不是预期的。默认情况下，图像会拉伸到合适的大小，因此，您会看到许多在线严重扭曲的图像，最有可能是由于指定高度和宽度的错误。

您可以使用CSS 3 transforms实现拉伸效果，虽然那些没有完全标准化或在所有浏览器中实现，以及实现它的那些，您需要使用供应商前缀，如-webkit-或-moz-。这里有一个例子：

video {

-webkit-transform: scaleX(2);

-moz-transform: scaleX(2);

}