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

Pav*_*nik 0 css firefox html5 google-chrome webrtc

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

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

没有视频预期结果: 没有视频预期结果

没有视频实际结果: 没有视频实际结果

从截图中可以看出,我的花式背景上方有黑色矩形.我想让这个丑陋的黑色矩形透明,让我的视频背景可见.

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

感谢你的帮助=)

更新:

"无视频"表示用户/用户没有网络摄像头,而流只有音频轨道.

Pav*_*nik 5

答对了!

深入阅读文档给出了一些结果=)这很容易:

<video poster="image.jpg">
Run Code Online (Sandbox Code Playgroud)

一个简单的属性让我开心