<video>响应分辨率无论是移动和桌面浏览器

Question

我有一个简单的问题关于<video>标签。

我想要构建一个简单的全屏视频聊天，其运行在PhoneGap（移动）和桌面浏览器（Chrome）上。

我需要的是视频保持全屏，如果它来自手机相机或台式机浏览器相机。我想他们会有不同的长宽比，我不明白如何合并问题。

我害怕的是，当视频来自移动摄像机时，它怎么可能适合整个浏览器屏幕（全屏），这是更大的？

对不起，如果我还没有尝试过任何东西，但我只是想了解什么开始，背后的逻辑。

任何提示赞赏！

Answer 1

如果您不希望更改视频的宽高比，那么您只能制作全屏画布。视频仍然会以原始长宽比显示，并且围绕它将是黑色空格。要使其全屏，请使用width: 100%; height: 100%; position: fixed;。请记住，浏览器窗口并不总是具有普通的宽高比（16：9,4：3等等），因为您可以在未最大化的窗口中查看网站。长宽比将会自定义。