css - 修复 HTML 视频元素的黑色矩形

Question

我正在实现 WebRTC 视频聊天。我想实现以下案例:

默认情况下，视频元素通过 css 具有背景图像，如果没有视频输入，则用户会看到他(或对话者)的头像:

无视频预期结果:

无视频实际结果:

正如您从屏幕截图中看到的，我在花哨的背景上方有黑色矩形。我想让这个丑陋的黑色矩形透明，并使我的视频背景可见。

实际上，在不引入任何额外标记的情况下解决问题会很棒。

感谢您的帮助 =)

更新:

“无视频”意味着用户/用户没有网络摄像头并且流只有音轨。

Answer 1

宾果!

阅读 documentation深入地给出了一些结果 =) 就这么简单:

<video poster="image.jpg">

一个简单的属性让我开心