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

<video> responsive resolution both for mobile and desktop browser

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

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

我需要的是无论来自移动摄像头还是桌面浏览器摄像头的视频都保持全屏显示。我猜他们会有不同的纵横比,我不知道如何合并这个问题。

我担心的是,当视频来自移动摄像头时,它如何适应更大的整个浏览器屏幕(全屏)?

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

感谢任何提示!

如果不想改变视频的纵横比,只能全屏canvas。视频仍将以原始宽高比显示,周围将是黑色空间。要使其全屏显示,请使用 width: 100%; height: 100%; position: fixed;。请记住,浏览器 window 并不总是采用常见的宽高比(16:9、4:3 等),因为您可以在未最大化 window 的情况下查看网站。宽高比将自定义。